33934 lines
942 KiB
JavaScript
33934 lines
942 KiB
JavaScript
/*
|
|
@license
|
|
webix UI v.3.3.17fix001
|
|
This software is allowed to use under GPL or you need to obtain Commercial License
|
|
to use it in non-GPL project. Please contact sales@webix.com for details
|
|
*/
|
|
if (!window.webix)
|
|
webix={};
|
|
|
|
//check some rule, show message as error if rule is not correct
|
|
webix.assert = function(test, message){
|
|
if (!test){
|
|
webix.assert_error(message);
|
|
}
|
|
};
|
|
|
|
webix.assert_config = function(obj){
|
|
var coll = obj.cells || obj.rows || obj.elements || obj.cols;
|
|
if (coll)
|
|
for (var i=0; i<coll.length; i++)
|
|
if (coll[i] === null || typeof coll[i] === "undefined")
|
|
webix.assert_error("You have trailing comma or Null element in collection's configuration");
|
|
};
|
|
|
|
webix.assert_error = function(message){
|
|
//jshint debug:true
|
|
webix.log("error",message);
|
|
if (webix.message && typeof message == "string")
|
|
webix.message({ type:"debug", text:message, expire:-1 });
|
|
if (webix.debug !== false)
|
|
debugger;
|
|
};
|
|
|
|
//entry point for analitic scripts
|
|
webix.assert_core_ready = function(){
|
|
if (window.webix_on_core_ready)
|
|
window.webix_on_core_ready();
|
|
};
|
|
|
|
webix.assert_level = 0;
|
|
|
|
webix.assert_level_in = function(){
|
|
webix.assert_level++;
|
|
if (webix.assert_level == 100)
|
|
webix.assert_error("Attempt to copy object with self reference");
|
|
};
|
|
webix.assert_level_out = function(){
|
|
webix.assert_level--;
|
|
};
|
|
|
|
/*
|
|
Common helpers
|
|
*/
|
|
webix.version="3.3.17";
|
|
webix.codebase="./";
|
|
webix.name = "core";
|
|
webix.cdn = "//cdn.webix.com";
|
|
|
|
//coding helpers
|
|
webix.clone = function(source){
|
|
var f = webix.clone._function;
|
|
f.prototype = source;
|
|
return new f();
|
|
};
|
|
webix.clone._function = function(){};
|
|
|
|
//copies methods and properties from source to the target
|
|
webix.extend = function(base, source, force){
|
|
webix.assert(base,"Invalid mixing target");
|
|
webix.assert(source,"Invalid mixing source");
|
|
|
|
if (base.$protoWait){
|
|
webix.PowerArray.insertAt.call(base.$protoWait, source,1);
|
|
return base;
|
|
}
|
|
|
|
//copy methods, overwrite existing ones in case of conflict
|
|
for (var method in source)
|
|
if (!base[method] || force)
|
|
base[method] = source[method];
|
|
|
|
//in case of defaults - preffer top one
|
|
if (source.defaults)
|
|
webix.extend(base.defaults, source.defaults);
|
|
|
|
//if source object has init code - call init against target
|
|
if (source.$init)
|
|
source.$init.call(base);
|
|
|
|
return base;
|
|
};
|
|
|
|
//copies methods and properties from source to the target from all levels
|
|
webix.copy = function(source){
|
|
webix.assert(source,"Invalid mixing target");
|
|
webix.assert_level_in();
|
|
|
|
var target;
|
|
if(arguments.length>1){
|
|
target = arguments[0];
|
|
source = arguments[1];
|
|
} else
|
|
target = (webix.isArray(source)?[]:{});
|
|
|
|
for (var method in source){
|
|
var from = source[method];
|
|
if(from && typeof from == "object"){
|
|
if (!webix.isDate(from)){
|
|
target[method] = (webix.isArray(from)?[]:{});
|
|
webix.copy(target[method],from);
|
|
} else
|
|
target[method] = new Date(from);
|
|
} else {
|
|
target[method] = from;
|
|
}
|
|
}
|
|
|
|
webix.assert_level_out();
|
|
return target;
|
|
};
|
|
|
|
webix.single = function(source){
|
|
var instance = null;
|
|
var t = function(config){
|
|
if (!instance)
|
|
instance = new source({});
|
|
|
|
if (instance._reinit)
|
|
instance._reinit.apply(instance, arguments);
|
|
return instance;
|
|
};
|
|
return t;
|
|
};
|
|
|
|
webix.protoUI = function(){
|
|
if (webix.debug_proto)
|
|
webix.log("UI registered: "+arguments[0].name);
|
|
|
|
var origins = arguments;
|
|
var selfname = origins[0].name;
|
|
|
|
var t = function(data){
|
|
if (!t)
|
|
return webix.ui[selfname].prototype;
|
|
|
|
var origins = t.$protoWait;
|
|
if (origins){
|
|
var params = [origins[0]];
|
|
|
|
for (var i=1; i < origins.length; i++){
|
|
params[i] = origins[i];
|
|
|
|
if (params[i].$protoWait)
|
|
params[i] = params[i].call(webix, params[i].name);
|
|
|
|
if (params[i].prototype && params[i].prototype.name)
|
|
webix.ui[params[i].prototype.name] = params[i];
|
|
}
|
|
webix.ui[selfname] = webix.proto.apply(webix, params);
|
|
|
|
if (t._webix_type_wait)
|
|
for (var i=0; i < t._webix_type_wait.length; i++)
|
|
webix.type(webix.ui[selfname], t._webix_type_wait[i]);
|
|
|
|
t = origins = null;
|
|
}
|
|
|
|
if (this != webix)
|
|
return new webix.ui[selfname](data);
|
|
else
|
|
return webix.ui[selfname];
|
|
};
|
|
t.$protoWait = Array.prototype.slice.call(arguments, 0);
|
|
return (webix.ui[selfname]=t);
|
|
};
|
|
|
|
webix.proto = function(){
|
|
|
|
if (webix.debug_proto)
|
|
webix.log("Proto chain:"+arguments[0].name+"["+arguments.length+"]");
|
|
|
|
var origins = arguments;
|
|
var compilation = origins[0];
|
|
var has_constructor = !!compilation.$init;
|
|
var construct = [];
|
|
|
|
webix.assert(compilation,"Invalid mixing target");
|
|
|
|
for (var i=origins.length-1; i>0; i--) {
|
|
webix.assert(origins[i],"Invalid mixing source");
|
|
if (typeof origins[i]== "function")
|
|
origins[i]=origins[i].prototype;
|
|
if (origins[i].$init)
|
|
construct.push(origins[i].$init);
|
|
if (origins[i].defaults){
|
|
var defaults = origins[i].defaults;
|
|
if (!compilation.defaults)
|
|
compilation.defaults = {};
|
|
for (var def in defaults)
|
|
if (webix.isUndefined(compilation.defaults[def]))
|
|
compilation.defaults[def] = defaults[def];
|
|
}
|
|
if (origins[i].type && compilation.type){
|
|
for (var def in origins[i].type)
|
|
if (!compilation.type[def])
|
|
compilation.type[def] = origins[i].type[def];
|
|
}
|
|
|
|
for (var key in origins[i]){
|
|
if (!compilation[key] && compilation[key] !== false)
|
|
compilation[key] = origins[i][key];
|
|
}
|
|
}
|
|
|
|
if (has_constructor)
|
|
construct.push(compilation.$init);
|
|
|
|
|
|
compilation.$init = function(){
|
|
for (var i=0; i<construct.length; i++)
|
|
construct[i].apply(this, arguments);
|
|
};
|
|
if (compilation.$skin)
|
|
compilation.$skin();
|
|
|
|
var result = function(config){
|
|
this.$ready=[];
|
|
webix.assert(this.$init,"object without init method");
|
|
this.$init(config);
|
|
if (this._parseSettings)
|
|
this._parseSettings(config, this.defaults);
|
|
for (var i=0; i < this.$ready.length; i++)
|
|
this.$ready[i].call(this);
|
|
};
|
|
result.prototype = compilation;
|
|
|
|
compilation = origins = null;
|
|
return result;
|
|
};
|
|
//creates function with specified "this" pointer
|
|
webix.bind=function(functor, object){
|
|
return function(){ return functor.apply(object,arguments); };
|
|
};
|
|
|
|
//loads module from external js file
|
|
webix.require=function(module, callback, master){
|
|
var promise = webix.promise.defer();
|
|
|
|
if (callback && callback !== true)
|
|
promise = promise.then(function(){ callback.call(master || this); });
|
|
|
|
if (webix.require.disabled){
|
|
promise.resolve();
|
|
return promise;
|
|
}
|
|
|
|
//multiple files required at once
|
|
if (typeof module != "string"){
|
|
var count = module.length||0;
|
|
|
|
if (!count){
|
|
// { file: true, other: true }
|
|
for (var file in module) count++;
|
|
var callback2 = function(){
|
|
count--;
|
|
if (count === 0)
|
|
promise.resolve();
|
|
};
|
|
for (var file in module)
|
|
webix.require(file, callback2, master);
|
|
} else {
|
|
// [ file, other ]
|
|
var callback2 = function(){
|
|
if (count){
|
|
count--;
|
|
webix.require(module[module.length - count - 1], callback2, master);
|
|
} else {
|
|
promise.resolve();
|
|
}
|
|
};
|
|
callback2();
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (webix._modules[module] !== true){
|
|
var fullpath = module;
|
|
if (!module.toString().match(/^([a-z]+\:)*\/\//i))
|
|
fullpath = webix.codebase + module;
|
|
|
|
//css, async, no waiting
|
|
if (module.substr(module.length-4) == ".css") {
|
|
var link = webix.html.create("LINK",{ type:"text/css", rel:"stylesheet", href:fullpath});
|
|
document.getElementsByTagName('head')[0].appendChild(link);
|
|
promise.resolve();
|
|
return promise;
|
|
}
|
|
|
|
//js, async, waiting
|
|
if (callback === true){
|
|
//sync mode
|
|
webix.exec( webix.ajax().sync().get(fullpath).responseText );
|
|
webix._modules[module]=true;
|
|
|
|
} else {
|
|
|
|
if (!webix._modules[module]){ //first call
|
|
webix._modules[module] = [promise];
|
|
|
|
webix.ajax(fullpath, function(text){
|
|
webix.exec(text); //evaluate code
|
|
var calls = webix._modules[module]; //callbacks
|
|
webix._modules[module] = true;
|
|
for (var i=0; i<calls.length; i++)
|
|
calls[i].resolve();
|
|
});
|
|
} else //module already loading
|
|
webix._modules[module].push(promise);
|
|
}
|
|
} else
|
|
promise.resolve();
|
|
|
|
return promise;
|
|
};
|
|
webix._modules = {}; //hash of already loaded modules
|
|
|
|
//evaluate javascript code in the global scoope
|
|
webix.exec=function(code){
|
|
if (window.execScript) //special handling for IE
|
|
window.execScript(code);
|
|
else window.eval(code);
|
|
};
|
|
|
|
webix.wrap = function(code, wrap){
|
|
if (!code) return wrap;
|
|
return function(){
|
|
var result = code.apply(this, arguments);
|
|
wrap.apply(this,arguments);
|
|
return result;
|
|
};
|
|
};
|
|
|
|
//check === undefined
|
|
webix.isUndefined=function(a){
|
|
return typeof a == "undefined";
|
|
};
|
|
//delay call to after-render time
|
|
webix.delay=function(method, obj, params, delay){
|
|
return window.setTimeout(function(){
|
|
if(!(obj&&obj.$destructed)){
|
|
var ret = method.apply(obj,(params||[]));
|
|
method = obj = params = null;
|
|
return ret;
|
|
}
|
|
},delay||1);
|
|
};
|
|
|
|
webix.once=function(method){
|
|
var flag = true;
|
|
return function(){
|
|
if (flag){
|
|
flag = false;
|
|
method.apply(this, arguments);
|
|
}
|
|
};
|
|
};
|
|
|
|
//common helpers
|
|
|
|
//generates unique ID (unique per window, nog GUID)
|
|
webix.uid = function(){
|
|
if (!this._seed) this._seed=(new Date()).valueOf(); //init seed with timestemp
|
|
this._seed++;
|
|
return this._seed;
|
|
};
|
|
//resolve ID as html object
|
|
webix.toNode = function(node){
|
|
if (typeof node == "string") return document.getElementById(node);
|
|
return node;
|
|
};
|
|
//adds extra methods for the array
|
|
webix.toArray = function(array){
|
|
return webix.extend((array||[]),webix.PowerArray, true);
|
|
};
|
|
//resolve function name
|
|
webix.toFunctor=function(str, scope){
|
|
if (typeof(str)=="string"){
|
|
var method = str.replace("()","");
|
|
if (scope && scope[method]) return scope[method];
|
|
return window[method] || eval(str);
|
|
}
|
|
return str;
|
|
};
|
|
/*checks where an object is instance of Array*/
|
|
webix.isArray = function(obj) {
|
|
return Array.isArray?Array.isArray(obj):(Object.prototype.toString.call(obj) === '[object Array]');
|
|
};
|
|
webix.isDate = function(obj){
|
|
return obj instanceof Date;
|
|
};
|
|
|
|
//dom helpers
|
|
|
|
//hash of attached events
|
|
webix._events = {};
|
|
//attach event to the DOM element
|
|
webix.event=function(node,event,handler,context){
|
|
context = context || {};
|
|
node = webix.toNode(node);
|
|
webix.assert(node, "Invalid node as target for webix.event");
|
|
|
|
var id = context.id || webix.uid();
|
|
if(context.bind)
|
|
handler=webix.bind(handler,context.bind);
|
|
|
|
|
|
webix._events[id]=[node,event,handler]; //store event info, for detaching
|
|
|
|
//use IE's of FF's way of event's attaching
|
|
if (node.addEventListener)
|
|
node.addEventListener(event, handler, !!context.capture);
|
|
else if (node.attachEvent)
|
|
node.attachEvent("on"+event, webix._events[id][2] = function(){
|
|
return handler.apply(node, arguments); //IE8 fix
|
|
});
|
|
|
|
return id; //return id of newly created event, can be used in eventRemove
|
|
};
|
|
|
|
//remove previously attached event
|
|
webix.eventRemove=function(id){
|
|
|
|
if (!id) return;
|
|
webix.assert(this._events[id],"Removing non-existing event");
|
|
|
|
var ev = webix._events[id];
|
|
//browser specific event removing
|
|
if (ev[0].removeEventListener)
|
|
ev[0].removeEventListener(ev[1],ev[2],false);
|
|
else if (ev[0].detachEvent)
|
|
ev[0].detachEvent("on"+ev[1],ev[2]);
|
|
|
|
|
|
delete this._events[id]; //delete all traces
|
|
};
|
|
|
|
|
|
//debugger helpers
|
|
//anything starting from error or log will be removed during code compression
|
|
|
|
//add message in the log
|
|
webix.log = function(type,message,details){
|
|
if (arguments.length == 1){
|
|
message = type;
|
|
type = "log";
|
|
}
|
|
/*jsl:ignore*/
|
|
if (window.console && window.console.log){
|
|
type=type.toLowerCase();
|
|
if (window.console[type])
|
|
window.console[type](message||"unknown error");
|
|
else
|
|
window.console.log(type +": "+message);
|
|
|
|
if (details)
|
|
window.console.log(details);
|
|
}
|
|
/*jsl:end*/
|
|
};
|
|
//register rendering time from call point
|
|
webix.log_full_time = function(name){
|
|
webix._start_time_log = new Date();
|
|
webix.log("Timing start ["+name+"]");
|
|
window.setTimeout(function(){
|
|
var time = new Date();
|
|
webix.log("Timing end ["+name+"]:"+(time.valueOf()-webix._start_time_log.valueOf())/1000+"s");
|
|
},1);
|
|
};
|
|
//register execution time from call point
|
|
webix.log_time = function(name){
|
|
var fname = "_start_time_log"+name;
|
|
if (!webix[fname]){
|
|
webix[fname] = new Date();
|
|
webix.log("Info","Timing start ["+name+"]");
|
|
} else {
|
|
var time = new Date();
|
|
webix.log("Info","Timing end ["+name+"]:"+(time.valueOf()-webix[fname].valueOf())/1000+"s");
|
|
webix[fname] = null;
|
|
}
|
|
};
|
|
webix.debug_code = function(code){
|
|
code.call(webix);
|
|
};
|
|
//event system
|
|
webix.EventSystem={
|
|
$init:function(){
|
|
if (!this._evs_events){
|
|
this._evs_events = {}; //hash of event handlers, name => handler
|
|
this._evs_handlers = {}; //hash of event handlers, ID => handler
|
|
this._evs_map = {};
|
|
}
|
|
},
|
|
//temporary block event triggering
|
|
blockEvent : function(){
|
|
this._evs_events._block = true;
|
|
},
|
|
//re-enable event triggering
|
|
unblockEvent : function(){
|
|
this._evs_events._block = false;
|
|
},
|
|
mapEvent:function(map){
|
|
webix.extend(this._evs_map, map, true);
|
|
},
|
|
on_setter:function(config){
|
|
if(config){
|
|
for(var i in config){
|
|
var method = webix.toFunctor(config[i], this.$scope);
|
|
var sub = i.indexOf("->");
|
|
if (sub !== -1){
|
|
this[i.substr(0,sub)].attachEvent(i.substr(sub+2), webix.bind(method, this));
|
|
} else
|
|
this.attachEvent(i, method);
|
|
}
|
|
}
|
|
},
|
|
//trigger event
|
|
callEvent:function(type,params){
|
|
if (this._evs_events._block) return true;
|
|
|
|
type = type.toLowerCase();
|
|
var event_stack =this._evs_events[type.toLowerCase()]; //all events for provided name
|
|
var return_value = true;
|
|
|
|
if (webix.log)
|
|
if ((webix.debug || this.debug) && !webix.debug_blacklist[type]) //can slowdown a lot
|
|
webix.log("info","["+this.name+"@"+((this._settings||{}).id)+"] event:"+type,params);
|
|
|
|
if (event_stack)
|
|
for(var i=0; i<event_stack.length; i++){
|
|
/*
|
|
Call events one by one
|
|
If any event return false - result of whole event will be false
|
|
Handlers which are not returning anything - counted as positive
|
|
*/
|
|
if (event_stack[i].apply(this,(params||[]))===false) return_value=false;
|
|
}
|
|
if (this._evs_map[type]){
|
|
var target = this._evs_map[type];
|
|
target.$eventSource = this;
|
|
if (!target.callEvent(type,params))
|
|
return_value = false;
|
|
target.$eventSource = null;
|
|
}
|
|
|
|
return return_value;
|
|
},
|
|
//assign handler for some named event
|
|
attachEvent:function(type,functor,id){
|
|
webix.assert(functor, "Invalid event handler for "+type);
|
|
|
|
type=type.toLowerCase();
|
|
|
|
id=id||webix.uid(); //ID can be used for detachEvent
|
|
functor = webix.toFunctor(functor, this.$scope); //functor can be a name of method
|
|
|
|
var event_stack=this._evs_events[type]||webix.toArray();
|
|
//save new event handler
|
|
if (arguments[3])
|
|
event_stack.unshift(functor);
|
|
else
|
|
event_stack.push(functor);
|
|
this._evs_events[type]=event_stack;
|
|
this._evs_handlers[id]={ f:functor,t:type };
|
|
|
|
return id;
|
|
},
|
|
//remove event handler
|
|
detachEvent:function(id){
|
|
if(!this._evs_handlers[id]){
|
|
return;
|
|
}
|
|
var type=this._evs_handlers[id].t;
|
|
var functor=this._evs_handlers[id].f;
|
|
|
|
//remove from all collections
|
|
var event_stack=this._evs_events[type];
|
|
event_stack.remove(functor);
|
|
delete this._evs_handlers[id];
|
|
},
|
|
hasEvent:function(type){
|
|
type=type.toLowerCase();
|
|
var stack = this._evs_events[type];
|
|
return (stack && stack.length) ? true : false;
|
|
}
|
|
};
|
|
|
|
webix.extend(webix, webix.EventSystem, true);
|
|
|
|
//array helper
|
|
//can be used by webix.toArray()
|
|
webix.PowerArray={
|
|
//remove element at specified position
|
|
removeAt:function(pos,len){
|
|
if (pos>=0) this.splice(pos,(len||1));
|
|
},
|
|
//find element in collection and remove it
|
|
remove:function(value){
|
|
this.removeAt(this.find(value));
|
|
},
|
|
//add element to collection at specific position
|
|
insertAt:function(data,pos){
|
|
if (!pos && pos!==0) //add to the end by default
|
|
this.push(data);
|
|
else {
|
|
var b = this.splice(pos,(this.length-pos));
|
|
this[pos] = data;
|
|
this.push.apply(this,b); //reconstruct array without loosing this pointer
|
|
}
|
|
},
|
|
//return index of element, -1 if it doesn't exists
|
|
find:function(data){
|
|
for (var i=0; i<this.length; i++)
|
|
if (data==this[i]) return i;
|
|
return -1;
|
|
},
|
|
//execute some method for each element of array
|
|
each:function(functor,master){
|
|
for (var i=0; i < this.length; i++)
|
|
functor.call((master||this),this[i]);
|
|
},
|
|
//create new array from source, by using results of functor
|
|
map:function(functor,master){
|
|
for (var i=0; i < this.length; i++)
|
|
this[i]=functor.call((master||this),this[i]);
|
|
return this;
|
|
},
|
|
filter:function(functor, master){
|
|
for (var i=0; i < this.length; i++)
|
|
if (!functor.call((master||this),this[i])){
|
|
this.splice(i,1);
|
|
i--;
|
|
}
|
|
return this;
|
|
}
|
|
};
|
|
|
|
webix.env = {};
|
|
|
|
// webix.env.transform
|
|
// webix.env.transition
|
|
(function(){
|
|
webix.env.strict = !!window.webix_strict;
|
|
webix.env.https = document.location.protocol === "https:";
|
|
|
|
if (navigator.userAgent.indexOf("Mobile")!=-1 || navigator.userAgent.indexOf("Windows Phone")!=-1)
|
|
webix.env.mobile = true;
|
|
if (webix.env.mobile || navigator.userAgent.indexOf("iPad")!=-1 || navigator.userAgent.indexOf("Android")!=-1)
|
|
webix.env.touch = true;
|
|
if (navigator.userAgent.indexOf('Opera')!=-1)
|
|
webix.env.isOpera=true;
|
|
else{
|
|
//very rough detection, but it is enough for current goals
|
|
webix.env.isIE=!!document.all || (navigator.userAgent.indexOf("Trident") !== -1);
|
|
if (webix.env.isIE){
|
|
var version = parseFloat(navigator.appVersion.split("MSIE")[1]);
|
|
if (version == 8)
|
|
webix.env.isIE8 = true;
|
|
}
|
|
webix.env.isEdge=(navigator.userAgent.indexOf("Edge")!=-1);
|
|
webix.env.isFF=(navigator.userAgent.indexOf("Firefox")!=-1);
|
|
webix.env.isWebKit=(navigator.userAgent.indexOf("KHTML")!=-1);
|
|
webix.env.isSafari=webix.env.isWebKit && (navigator.userAgent.indexOf('Mac')!=-1);
|
|
}
|
|
|
|
if(navigator.userAgent.toLowerCase().indexOf("android")!=-1){
|
|
webix.env.isAndroid = true;
|
|
if(navigator.userAgent.toLowerCase().indexOf("trident")){
|
|
webix.env.isAndroid = false;
|
|
webix.env.isIEMobile = true;
|
|
}
|
|
}
|
|
|
|
webix.env.transform = false;
|
|
webix.env.transition = false;
|
|
|
|
var found_index = -1;
|
|
var js_list = ['', 'webkit', 'Moz', 'O', 'ms'];
|
|
var css_list = ['', '-webkit-', '-Moz-', '-o-', '-ms-'];
|
|
|
|
|
|
var d = document.createElement("DIV");
|
|
for (var j=0; j < js_list.length; j++) {
|
|
var name = js_list[j] ? (js_list[j]+"Transform") : "transform";
|
|
if(typeof d.style[name] != 'undefined'){
|
|
found_index = j;
|
|
break;
|
|
}
|
|
}
|
|
|
|
|
|
if (found_index > -1){
|
|
webix.env.cssPrefix = css_list[found_index];
|
|
var jp = webix.env.jsPrefix = js_list[found_index];
|
|
|
|
webix.env.transform = jp ? jp+"Transform" : "transform";
|
|
webix.env.transition = jp ? jp+"Transition" : "transition";
|
|
webix.env.transitionDuration = jp ? jp+"TransitionDuration" : "transitionDuration";
|
|
|
|
d.style[webix.env.transform] = "translate3d(0,0,0)";
|
|
webix.env.translate = (d.style[webix.env.transform])?"translate3d":"translate";
|
|
webix.env.transitionEnd = ((webix.env.cssPrefix == '-Moz-')?"transitionend":(jp ? jp+"TransitionEnd" : "transitionend"));
|
|
}
|
|
|
|
webix.env.pointerevents = (!webix.env.isIE ||(new RegExp("Trident/.*rv:11")).exec(navigator.userAgent) !== null);
|
|
})();
|
|
|
|
|
|
webix.env.svg = (function(){
|
|
return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1");
|
|
})();
|
|
|
|
|
|
//html helpers
|
|
webix.html={
|
|
_native_on_selectstart:0,
|
|
denySelect:function(){
|
|
if (!webix._native_on_selectstart)
|
|
webix._native_on_selectstart = document.onselectstart;
|
|
document.onselectstart = webix.html.stopEvent;
|
|
},
|
|
allowSelect:function(){
|
|
if (webix._native_on_selectstart !== 0){
|
|
document.onselectstart = webix._native_on_selectstart||null;
|
|
}
|
|
webix._native_on_selectstart = 0;
|
|
|
|
},
|
|
index:function(node){
|
|
var k=0;
|
|
//must be =, it is not a comparation!
|
|
while ((node = node.previousSibling)) k++;
|
|
return k;
|
|
},
|
|
_style_cache:{},
|
|
createCss:function(rule, sufix){
|
|
var text = "";
|
|
sufix = sufix || "";
|
|
|
|
for (var key in rule)
|
|
text+= key+":"+rule[key]+";";
|
|
|
|
var name = this._style_cache[text+sufix];
|
|
if (!name){
|
|
name = "s"+webix.uid();
|
|
this.addStyle("."+name+(sufix||"")+"{"+text+"}");
|
|
this._style_cache[text+sufix] = name;
|
|
}
|
|
return name;
|
|
},
|
|
addStyle:function(rule){
|
|
var style = this._style_element;
|
|
if(!style){
|
|
style = this._style_element = document.createElement("style");
|
|
style.setAttribute("type", "text/css");
|
|
style.setAttribute("media", "screen");
|
|
document.getElementsByTagName("head")[0].appendChild(style);
|
|
}
|
|
/*IE8*/
|
|
if (style.styleSheet)
|
|
style.styleSheet.cssText += rule;
|
|
else
|
|
style.appendChild(document.createTextNode(rule));
|
|
},
|
|
create:function(name,attrs,html){
|
|
attrs = attrs || {};
|
|
var node = document.createElement(name);
|
|
for (var attr_name in attrs)
|
|
node.setAttribute(attr_name, attrs[attr_name]);
|
|
if (attrs.style)
|
|
node.style.cssText = attrs.style;
|
|
if (attrs["class"])
|
|
node.className = attrs["class"];
|
|
if (html)
|
|
node.innerHTML=html;
|
|
return node;
|
|
},
|
|
//return node value, different logic for different html elements
|
|
getValue:function(node){
|
|
node = webix.toNode(node);
|
|
if (!node) return "";
|
|
return webix.isUndefined(node.value)?node.innerHTML:node.value;
|
|
},
|
|
//remove html node, can process an array of nodes at once
|
|
remove:function(node){
|
|
if (node instanceof Array)
|
|
for (var i=0; i < node.length; i++)
|
|
this.remove(node[i]);
|
|
else if (node && node.parentNode)
|
|
node.parentNode.removeChild(node);
|
|
},
|
|
//insert new node before sibling, or at the end if sibling doesn't exist
|
|
insertBefore: function(node,before,rescue){
|
|
if (!node) return;
|
|
if (before && before.parentNode)
|
|
before.parentNode.insertBefore(node, before);
|
|
else
|
|
rescue.appendChild(node);
|
|
},
|
|
//return custom ID from html element
|
|
//will check all parents starting from event's target
|
|
locate:function(e,id){
|
|
var trg;
|
|
if (e.tagName)
|
|
trg = e;
|
|
else {
|
|
e=e||event;
|
|
trg=e.target||e.srcElement;
|
|
}
|
|
|
|
while (trg){
|
|
if (trg.getAttribute){ //text nodes has not getAttribute
|
|
var test = trg.getAttribute(id);
|
|
if (test) return test;
|
|
}
|
|
trg=trg.parentNode;
|
|
}
|
|
return null;
|
|
},
|
|
//returns position of html element on the page
|
|
offset:function(elem) {
|
|
if (elem.getBoundingClientRect) { //HTML5 method
|
|
var box = elem.getBoundingClientRect();
|
|
var body = document.body;
|
|
var docElem = document.documentElement;
|
|
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
|
|
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
|
|
var clientTop = docElem.clientTop || body.clientTop || 0;
|
|
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
|
|
var top = box.top + scrollTop - clientTop;
|
|
var left = box.left + scrollLeft - clientLeft;
|
|
return { y: Math.round(top), x: Math.round(left), width:elem.offsetWidth, height:elem.offsetHeight };
|
|
} else { //fallback to naive approach
|
|
var top=0, left=0;
|
|
while(elem) {
|
|
top = top + parseInt(elem.offsetTop,10);
|
|
left = left + parseInt(elem.offsetLeft,10);
|
|
elem = elem.offsetParent;
|
|
}
|
|
return { y: top, x: left, width:elem.offsetHeight, height:elem.offsetWidth };
|
|
}
|
|
},
|
|
//returns relative position of event
|
|
posRelative:function(ev){
|
|
ev = ev || event;
|
|
if (!webix.isUndefined(ev.offsetX))
|
|
return { x:ev.offsetX, y:ev.offsetY }; //ie, webkit
|
|
else
|
|
return { x:ev.layerX, y:ev.layerY }; //firefox
|
|
},
|
|
//returns position of event
|
|
pos:function(ev){
|
|
ev = ev || event;
|
|
if (ev.touches && ev.touches[0])
|
|
ev = ev.touches[0];
|
|
|
|
if(ev.pageX || ev.pageY) //FF, KHTML
|
|
return {x:ev.pageX, y:ev.pageY};
|
|
//IE
|
|
var d = ((webix.env.isIE)&&(document.compatMode != "BackCompat"))?document.documentElement:document.body;
|
|
return {
|
|
x:ev.clientX + d.scrollLeft - d.clientLeft,
|
|
y:ev.clientY + d.scrollTop - d.clientTop
|
|
};
|
|
},
|
|
//prevent event action
|
|
preventEvent:function(e){
|
|
if(e && e.preventDefault) e.preventDefault();
|
|
if(e) e.returnValue = false;
|
|
return webix.html.stopEvent(e);
|
|
},
|
|
//stop event bubbling
|
|
stopEvent:function(e){
|
|
e = (e||event);
|
|
if(e.stopPropagation) e.stopPropagation();
|
|
e.cancelBubble=true;
|
|
return false;
|
|
},
|
|
//add css class to the node
|
|
addCss:function(node,name,check){
|
|
if (!check || node.className.indexOf(name) === -1)
|
|
node.className+=" "+name;
|
|
},
|
|
//remove css class from the node
|
|
removeCss:function(node,name){
|
|
node.className=node.className.replace(RegExp(" "+name,"g"),"");
|
|
},
|
|
getTextSize:function(text, css){
|
|
var d = webix.html.create("DIV",{"class":"webix_view webix_measure_size "+(css||"")},"");
|
|
d.style.cssText = "width:1px; height:1px; visibility:hidden; position:absolute; top:0px; left:0px; overflow:hidden; white-space:nowrap;";
|
|
document.body.appendChild(d);
|
|
|
|
var all = (typeof text !== "object") ? [text] : text;
|
|
var width = 0;
|
|
var height = 0;
|
|
|
|
for (var i = 0; i < all.length; i++) {
|
|
d.innerHTML = all[i];
|
|
width = Math.max(width, d.scrollWidth);
|
|
height = Math.max(height, d.scrollHeight);
|
|
}
|
|
|
|
webix.html.remove(d);
|
|
return { width:width, height:height };
|
|
},
|
|
download:function(data, filename){
|
|
var objUrl = false;
|
|
|
|
if(typeof data =="object"){//blob
|
|
if(window.navigator.msSaveBlob)
|
|
return window.navigator.msSaveBlob(data, filename);
|
|
else if (webix.env.isSafari){
|
|
var reader = new FileReader();
|
|
reader.onloadend = function() {
|
|
var base64Data = reader.result;
|
|
webix.html.download("data:attachment/file" + base64Data.slice(base64Data.search(/[,;]/)), filename);
|
|
};
|
|
reader.readAsDataURL(data);
|
|
return;
|
|
} else {
|
|
data = window.URL.createObjectURL(data);
|
|
objUrl = true;
|
|
}
|
|
}
|
|
//data url or blob url
|
|
var link = document.createElement("a");
|
|
link.href = data;
|
|
link.download = filename;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
|
|
webix.delay(function(){
|
|
if(objUrl) window.URL.revokeObjectURL(data);
|
|
document.body.removeChild(link);
|
|
link.remove();
|
|
});
|
|
},
|
|
_getClassName: function(node){
|
|
if(!node) return "";
|
|
|
|
var className = node.className || "";
|
|
if(className.baseVal)//'className' exist but not a string - IE svg element in DOM
|
|
className = className.baseVal;
|
|
|
|
if(!className.indexOf)
|
|
className = "";
|
|
|
|
return className;
|
|
}
|
|
};
|
|
|
|
webix.ready = function(code){
|
|
if (this._ready) code.call();
|
|
else this._ready_code.push(code);
|
|
};
|
|
webix.debug_ready = webix.ready; //same command but will work only in dev. build
|
|
webix._ready_code = [];
|
|
|
|
//autodetect codebase folder
|
|
(function(){
|
|
var temp = document.getElementsByTagName("SCRIPT"); //current script, most probably
|
|
webix.assert(temp.length,"Can't locate codebase");
|
|
if (temp.length){
|
|
//full path to script
|
|
temp = (temp[temp.length-1].getAttribute("src")||"").split("/");
|
|
//get folder name
|
|
temp.splice(temp.length-1, 1);
|
|
webix.codebase = temp.slice(0, temp.length).join("/")+"/";
|
|
}
|
|
|
|
var ready = function(){
|
|
if(webix.env.isIE)
|
|
document.body.className += " webix_ie";
|
|
webix.callEvent("onReady",[]);
|
|
};
|
|
|
|
var doit = function(){
|
|
webix._ready = true;
|
|
|
|
//global plugins
|
|
if (window.webix_ready && webix.isArray(webix_ready))
|
|
webix._ready_code = webix_ready.concat(webix._ready_code);
|
|
|
|
for (var i=0; i < webix._ready_code.length; i++)
|
|
webix._ready_code[i].call();
|
|
webix._ready_code=[];
|
|
};
|
|
|
|
webix.attachEvent("onReady", function(force){
|
|
if (force)
|
|
doit();
|
|
else
|
|
webix.delay(doit);
|
|
});
|
|
|
|
if (document.readyState == "complete") ready();
|
|
else webix.event(window, "load", ready);
|
|
|
|
})();
|
|
|
|
webix.locale=webix.locale||{};
|
|
|
|
|
|
webix.assert_core_ready();
|
|
|
|
|
|
webix.ready(function(){
|
|
webix.event(document.body,"click", function(e){
|
|
webix.callEvent("onClick",[e||event]);
|
|
});
|
|
});
|
|
webix.editStop = function(){
|
|
webix.callEvent("onEditEnd", []);
|
|
};
|
|
|
|
|
|
webix.debug_blacklist={
|
|
onmousemoving:1
|
|
};
|
|
/**
|
|
|
|
Bazed on Promiz - A fast Promises/A+ library
|
|
https://github.com/Zolmeister/promiz
|
|
|
|
The MIT License (MIT)
|
|
|
|
Copyright (c) 2014 Zolmeister
|
|
|
|
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
this software and associated documentation files (the "Software"), to deal in
|
|
the Software without restriction, including without limitation the rights to
|
|
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
|
the Software, and to permit persons to whom the Software is furnished to do so,
|
|
subject to the following conditions:
|
|
|
|
The above copyright notice and this permission notice shall be included in all
|
|
copies or substantial portions of the Software.
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
|
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
|
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
|
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
|
|
*/
|
|
|
|
/* jshint ignore:start */
|
|
(function (self) {
|
|
var now = typeof setImmediate !== 'undefined' ? setImmediate : function(cb) {
|
|
setTimeout(cb, 0)
|
|
}
|
|
|
|
/**
|
|
* @constructor
|
|
*/
|
|
function promise(fn, er) {
|
|
var self = this
|
|
|
|
self.promise = self
|
|
self.state = 'pending'
|
|
self.val = null
|
|
self.fn = fn || null
|
|
self.er = er || null
|
|
self.next = [];
|
|
}
|
|
|
|
promise.prototype.resolve = function (v) {
|
|
var self = this
|
|
if (self.state === 'pending') {
|
|
self.val = v
|
|
self.state = 'resolving'
|
|
|
|
now(function () {
|
|
self.fire()
|
|
})
|
|
}
|
|
}
|
|
|
|
promise.prototype.reject = function (v) {
|
|
var self = this
|
|
if (self.state === 'pending') {
|
|
self.val = v
|
|
self.state = 'rejecting'
|
|
|
|
now(function () {
|
|
self.fire()
|
|
})
|
|
}
|
|
}
|
|
|
|
promise.prototype.then = function (fn, er) {
|
|
var self = this
|
|
var p = new promise(fn, er)
|
|
self.next.push(p)
|
|
if (self.state === 'resolved') {
|
|
p.resolve(self.val)
|
|
}
|
|
if (self.state === 'rejected') {
|
|
p.reject(self.val)
|
|
}
|
|
return p
|
|
}
|
|
promise.prototype.fail = function (er) {
|
|
return this.then(null, er)
|
|
}
|
|
promise.prototype.finish = function (type) {
|
|
var self = this
|
|
self.state = type
|
|
|
|
if (self.state === 'resolved') {
|
|
for (var i = 0; i < self.next.length; i++)
|
|
self.next[i].resolve(self.val);
|
|
}
|
|
|
|
if (self.state === 'rejected') {
|
|
for (var i = 0; i < self.next.length; i++)
|
|
self.next[i].reject(self.val);
|
|
|
|
if (webix.assert && !self.next.length)
|
|
throw(self.val);
|
|
}
|
|
}
|
|
|
|
// ref : reference to 'then' function
|
|
// cb, ec, cn : successCallback, failureCallback, notThennableCallback
|
|
promise.prototype.thennable = function (ref, cb, ec, cn, val) {
|
|
var self = this
|
|
val = val || self.val
|
|
if (typeof val === 'object' && typeof ref === 'function') {
|
|
try {
|
|
// cnt protects against abuse calls from spec checker
|
|
var cnt = 0
|
|
ref.call(val, function(v) {
|
|
if (cnt++ !== 0) return
|
|
cb(v)
|
|
}, function (v) {
|
|
if (cnt++ !== 0) return
|
|
ec(v)
|
|
})
|
|
} catch (e) {
|
|
ec(e)
|
|
}
|
|
} else {
|
|
cn(val)
|
|
}
|
|
}
|
|
|
|
promise.prototype.fire = function () {
|
|
var self = this
|
|
// check if it's a thenable
|
|
var ref;
|
|
try {
|
|
ref = self.val && self.val.then
|
|
} catch (e) {
|
|
self.val = e
|
|
self.state = 'rejecting'
|
|
return self.fire()
|
|
}
|
|
|
|
self.thennable(ref, function (v) {
|
|
self.val = v
|
|
self.state = 'resolving'
|
|
self.fire()
|
|
}, function (v) {
|
|
self.val = v
|
|
self.state = 'rejecting'
|
|
self.fire()
|
|
}, function (v) {
|
|
self.val = v
|
|
|
|
if (self.state === 'resolving' && typeof self.fn === 'function') {
|
|
try {
|
|
self.val = self.fn.call(undefined, self.val)
|
|
} catch (e) {
|
|
self.val = e
|
|
return self.finish('rejected')
|
|
}
|
|
}
|
|
|
|
if (self.state === 'rejecting' && typeof self.er === 'function') {
|
|
try {
|
|
self.val = self.er.call(undefined, self.val)
|
|
self.state = 'resolving'
|
|
} catch (e) {
|
|
self.val = e
|
|
return self.finish('rejected')
|
|
}
|
|
}
|
|
|
|
if (self.val === self) {
|
|
self.val = TypeError()
|
|
return self.finish('rejected')
|
|
}
|
|
|
|
self.thennable(ref, function (v) {
|
|
self.val = v
|
|
self.finish('resolved')
|
|
}, function (v) {
|
|
self.val = v
|
|
self.finish('rejected')
|
|
}, function (v) {
|
|
self.val = v
|
|
self.state === 'resolving' ? self.finish('resolved') : self.finish('rejected')
|
|
})
|
|
|
|
})
|
|
}
|
|
|
|
promise.prototype.done = function () {
|
|
if (this.state = 'rejected' && !this.next) {
|
|
throw this.val
|
|
}
|
|
return null
|
|
}
|
|
|
|
promise.prototype.nodeify = function (cb) {
|
|
if (typeof cb === 'function') return this.then(function (val) {
|
|
try {
|
|
cb(null, val)
|
|
} catch (e) {
|
|
setImmediate(function () {
|
|
throw e
|
|
})
|
|
}
|
|
|
|
return val
|
|
}, function (val) {
|
|
try {
|
|
cb(val)
|
|
} catch (e) {
|
|
setImmediate(function () {
|
|
throw e
|
|
})
|
|
}
|
|
|
|
return val
|
|
})
|
|
|
|
return this
|
|
}
|
|
|
|
promise.prototype.spread = function (fn, er) {
|
|
return this.all().then(function (list) {
|
|
return typeof fn === 'function' && fn.apply(null, list)
|
|
}, er)
|
|
}
|
|
|
|
promise.prototype.all = function() {
|
|
var self = this
|
|
return this.then(function(list){
|
|
var p = new promise()
|
|
if(!(list instanceof Array)) {
|
|
p.reject(TypeError)
|
|
return p
|
|
}
|
|
|
|
var cnt = 0
|
|
var target = list.length
|
|
|
|
function done() {
|
|
if (++cnt === target) p.resolve(list)
|
|
}
|
|
|
|
for(var i=0, l=list.length; i<l; i++) {
|
|
var value = list[i]
|
|
var ref;
|
|
|
|
try {
|
|
ref = value && value.then
|
|
} catch (e) {
|
|
p.reject(e)
|
|
break
|
|
}
|
|
|
|
(function(i){
|
|
self.thennable(ref, function(val){
|
|
list[i] = val
|
|
done()
|
|
}, function(val){
|
|
list[i] = val
|
|
done()
|
|
}, function(){
|
|
done()
|
|
}, value)
|
|
})(i)
|
|
}
|
|
|
|
return p
|
|
})
|
|
}
|
|
|
|
// self object gets globalalized/exported
|
|
var promiz = {
|
|
|
|
all:function(list){
|
|
var p = new promise(null, null);
|
|
p.resolve(list);
|
|
return p.all();
|
|
},
|
|
// promise factory
|
|
defer: function () {
|
|
return new promise(null, null)
|
|
},
|
|
|
|
// calls a function and resolved as a promise
|
|
fcall: function() {
|
|
var def = new promise()
|
|
var args = Array.apply([], arguments)
|
|
var fn = args.shift()
|
|
try {
|
|
var val = fn.apply(null, args)
|
|
def.resolve(val)
|
|
} catch(e) {
|
|
def.reject(e)
|
|
}
|
|
|
|
return def
|
|
},
|
|
|
|
// calls a node-style function (eg. expects callback as function(err, callback))
|
|
nfcall: function() {
|
|
var def = new promise()
|
|
var args = Array.apply([], arguments)
|
|
var fn = args.shift()
|
|
try {
|
|
|
|
// Add our custom promise callback to the end of the arguments
|
|
args.push(function(err, val){
|
|
if(err) {
|
|
return def.reject(err)
|
|
}
|
|
return def.resolve(val)
|
|
})
|
|
fn.apply(null, args)
|
|
} catch (e) {
|
|
def.reject(e)
|
|
}
|
|
|
|
return def
|
|
}
|
|
}
|
|
|
|
self.promise = promiz
|
|
})(webix);
|
|
/* jshint ignore:end */
|
|
|
|
(function(){
|
|
|
|
var token = "";
|
|
var config = {
|
|
timeout:30,
|
|
parseDates:true,
|
|
multicall:true
|
|
};
|
|
|
|
var queue = [];
|
|
var nexttimer;
|
|
|
|
function call_remote(url, name, args){
|
|
var pack = { name: name, data:args, key:token };
|
|
var defer = webix.promise.defer();
|
|
|
|
queue.push([url, pack, defer]);
|
|
|
|
if (!nexttimer)
|
|
nexttimer = setTimeout(next_timer_call,1);
|
|
|
|
defer.sync = function(){
|
|
pack.sync = true;
|
|
return call_remote_sync(url, pack);
|
|
};
|
|
|
|
return defer;
|
|
}
|
|
|
|
function next_timer_call(){
|
|
var megapack = [];
|
|
var megaqueue = [];
|
|
var megaurl = "";
|
|
|
|
|
|
for (var i=0; i<queue.length; i++){
|
|
var pack = queue[i];
|
|
if (!pack[1].sync){
|
|
if (config.multicall){
|
|
megaurl = pack[0];
|
|
megapack.push(pack[1]);
|
|
megaqueue.push(pack);
|
|
} else
|
|
call_remote_async.apply(this, pack);
|
|
}
|
|
}
|
|
|
|
queue = [];
|
|
nexttimer = false;
|
|
|
|
if (config.multicall && megapack.length)
|
|
call_remote_async(megaurl,
|
|
{ data:megapack, key:token, multicall:true },
|
|
megaqueue
|
|
);
|
|
}
|
|
|
|
function resolve(defer, data){
|
|
if (config.multicall)
|
|
for (var i = 0; i < defer.length; i++)
|
|
defer[i][2].resolve(data[i]);
|
|
else
|
|
defer.resolve(data);
|
|
}
|
|
|
|
function reject(defer, data){
|
|
if (config.multicall)
|
|
for (var i = 0; i < defer.length; i++)
|
|
defer[i][2].reject(data);
|
|
else
|
|
defer.reject(data);
|
|
}
|
|
|
|
function call_remote_async(url, pack, defer){
|
|
var ajax = webix.ajax();
|
|
pack.data = ajax.stringify(pack.data);
|
|
ajax.post(url, pack).then(function(text){
|
|
var data = parse_responce(text.text());
|
|
if (!data)
|
|
reject(defer, text.text());
|
|
else
|
|
resolve(defer, data.data);
|
|
}, function(x){
|
|
reject(defer, x);
|
|
});
|
|
|
|
webix.callEvent("onRemoteCall", [defer, pack]);
|
|
}
|
|
|
|
function call_remote_sync(url, pack, args){
|
|
var ajax = webix.ajax();
|
|
webix.callEvent("onRemoteCall", [null, pack]);
|
|
pack.data = ajax.stringify(pack.data);
|
|
return parse_responce( ajax.sync().post(url, pack).responseText ).data;
|
|
}
|
|
|
|
function parse_responce(text){
|
|
return webix.DataDriver.json.toObject.call(config, text);
|
|
}
|
|
|
|
var t = webix.remote = function(api, url, obj, prefix){
|
|
if (!url){
|
|
var scripts = document.getElementsByTagName("script");
|
|
url = scripts[scripts.length - 1].src;
|
|
}
|
|
|
|
obj = obj || t;
|
|
prefix = prefix || "";
|
|
|
|
for (var key in api){
|
|
if (key == "$key")
|
|
token = api.$key;
|
|
else if (key.indexOf("$") === 0)
|
|
t[key] = api[key];
|
|
else if (typeof api[key] == "object"){
|
|
var sub = obj[key] = {};
|
|
t(api[key], url, sub, key+".");
|
|
} else
|
|
obj[key] = api_helper(url, prefix+key);
|
|
}
|
|
};
|
|
|
|
var api_helper = function(url, key){
|
|
return function(){
|
|
return call_remote(url, key, [].splice.call(arguments,0));
|
|
};
|
|
};
|
|
|
|
t.config = config;
|
|
t.flush = next_timer_call;
|
|
|
|
|
|
})();
|
|
|
|
|
|
/*
|
|
UI:DataView
|
|
*/
|
|
|
|
|
|
webix.skin={};
|
|
|
|
webix.skin.air = {
|
|
topLayout:"wide",
|
|
//bar in accordion
|
|
barHeight:34, //!!!Set the same in skin.less!!!
|
|
tabbarHeight: 36,
|
|
rowHeight:34,
|
|
toolbarHeight:22,
|
|
listItemHeight:28, //list, grouplist, dataview, etc.
|
|
inputHeight:34,
|
|
inputPadding: 2,
|
|
menuHeight: 34,
|
|
menuMargin:0,
|
|
labelTopHeight: 16,
|
|
|
|
//margin - distance between cells
|
|
layoutMargin:{ space:10, wide:4, clean:0, head:4, line:-1, toolbar:4, form:8 },
|
|
//padding - distance insede cell between cell border and cell content
|
|
layoutPadding:{ space:10, wide:0, clean:0, head:0, line:0, toolbar:4, form:8 },
|
|
//space between tabs in tabbar
|
|
tabMargin:0,
|
|
|
|
calendarHeight: 70,
|
|
padding:0,
|
|
|
|
optionHeight: 27
|
|
};
|
|
webix.skin["aircompact"] = {
|
|
topLayout:"wide",
|
|
//bar in accordion
|
|
barHeight:24, //!!!Set the same in skin.less!!!
|
|
tabbarHeight: 26,
|
|
rowHeight:26,
|
|
toolbarHeight:22,
|
|
listItemHeight:28, //list, grouplist, dataview, etc.
|
|
inputHeight:29,
|
|
inputPadding: 2,
|
|
menuHeight: 25,
|
|
menuMargin:0,
|
|
labelTopHeight: 16,
|
|
|
|
//margin - distance between cells
|
|
layoutMargin:{ space:10, wide:4, clean:0, head:4, line:-1, toolbar:4, form:8 },
|
|
//padding - distance insede cell between cell border and cell content
|
|
layoutPadding:{ space:10, wide:0, clean:0, head:0, line:0, toolbar:4, form:8 },
|
|
//space between tabs in tabbar
|
|
tabMargin:0,
|
|
|
|
calendarHeight: 70,
|
|
padding:0,
|
|
|
|
optionHeight: 23
|
|
};
|
|
|
|
webix.skin.web = {
|
|
name:"web",
|
|
topLayout:"space",
|
|
//bar in accordion
|
|
barHeight:28, //!!!Set the same in skin.less!!!
|
|
tabbarHeight: 30,
|
|
rowHeight:30,
|
|
toolbarHeight:22,
|
|
listItemHeight:28, //list, grouplist, dataview, etc.
|
|
inputHeight:28,
|
|
inputPadding: 2,
|
|
menuMargin: 0,
|
|
menuHeight: 27,
|
|
labelTopHeight: 16,
|
|
//accordionMargin: 9,
|
|
|
|
//margin - distance between cells
|
|
layoutMargin:{ space:10, wide:4, clean:0, head:4, line:-1, toolbar:4, form:8, accordion: 9 },
|
|
//padding - distance insede cell between cell border and cell content
|
|
layoutPadding:{ space:10, wide:0, clean:0, head:0, line:0, toolbar:4, form:8, accordion:0 },
|
|
//space between tabs in tabbar
|
|
tabMargin:3,
|
|
tabTopOffset:3,
|
|
|
|
calendarHeight: 70,
|
|
padding:0,
|
|
|
|
optionHeight: 22
|
|
};
|
|
webix.skin.clouds = {
|
|
topLayout:"wide",
|
|
//bar in accordion
|
|
barHeight:36, //!!!Set the same in skin.less!!!
|
|
tabbarHeight: 46,
|
|
rowHeight:34,
|
|
toolbarHeight:22,
|
|
listItemHeight:32, //list, grouplist, dataview, etc.
|
|
inputHeight:30,
|
|
inputPadding: 2,
|
|
menuHeight: 34,
|
|
labelTopHeight: 16,
|
|
|
|
//margin - distance between cells
|
|
layoutMargin:{ space:10, wide:4, clean:0, head:4, line:-1, toolbar:4, form:8 },
|
|
//padding - distance insede cell between cell border and cell content
|
|
layoutPadding:{ space:10, wide:0, clean:0, head:0, line:0, toolbar:4, form:8 },
|
|
//space between tabs in tabbar
|
|
tabMargin:2,
|
|
tabOffset:0,
|
|
tabBottomOffset: 10,
|
|
|
|
|
|
calendarHeight: 70,
|
|
padding:0
|
|
};
|
|
webix.skin.terrace = {
|
|
topLayout:"space",
|
|
//bar in accordion
|
|
barHeight:37, //!!!Set the same in skin.less!!!
|
|
tabbarHeight: 39,
|
|
rowHeight:38,
|
|
toolbarHeight:22,
|
|
listItemHeight:28, //list, grouplist, dataview, etc.
|
|
inputHeight:30,
|
|
inputPadding: 2,
|
|
menuMargin: 0,
|
|
menuHeight: 32,
|
|
labelTopHeight: 16,
|
|
|
|
//margin - distance between cells
|
|
layoutMargin:{ space:20, wide:20, clean:0, head:4, line:-1, toolbar:4, form:8},
|
|
//padding - distance insede cell between cell border and cell content
|
|
layoutPadding:{ space:20, wide:0, clean:0, head:0, line:0, toolbar:4, form:8 },
|
|
tabMargin:2,
|
|
tabOffset:0,
|
|
|
|
|
|
calendarHeight: 70,
|
|
//space between tabs in tabbar
|
|
padding:17,
|
|
|
|
optionHeight: 24
|
|
};
|
|
webix.skin.metro = {
|
|
topLayout:"space",
|
|
//bar in accordion
|
|
barHeight:36, //!!!Set the same in skin.less!!!
|
|
tabbarHeight: 46,
|
|
rowHeight:34,
|
|
toolbarHeight:36,
|
|
listItemHeight:32, //list, grouplist, dataview, etc.
|
|
inputHeight:30,
|
|
buttonHeight: 45,
|
|
inputPadding: 2,
|
|
menuHeight: 36,
|
|
labelTopHeight: 16,
|
|
|
|
//margin - distance between cells
|
|
layoutMargin:{ space:10, wide:4, clean:0, head:4, line:-1, toolbar:4, form:8, accordion: 9 },
|
|
//padding - distance insede cell between cell border and cell content
|
|
layoutPadding:{ space:10, wide:0, clean:0, head:0, line:0, toolbar:0, form:8, accordion: 0 },
|
|
//space between tabs in tabbar
|
|
tabMargin:2,
|
|
tabOffset:0,
|
|
tabBottomOffset: 10,
|
|
|
|
calendarHeight: 70,
|
|
padding:0,
|
|
|
|
optionHeight: 23
|
|
};
|
|
webix.skin.light = {
|
|
topLayout:"space",
|
|
//bar in accordion
|
|
barHeight:36, //!!!Set the same in skin.less!!!
|
|
tabbarHeight: 46,
|
|
rowHeight:32,
|
|
toolbarHeight:36,
|
|
listItemHeight:32, //list, grouplist, dataview, etc.
|
|
inputHeight:34,
|
|
buttonHeight: 45,
|
|
inputPadding: 3,
|
|
menuHeight: 36,
|
|
labelTopHeight: 16,
|
|
|
|
//margin - distance between cells
|
|
layoutMargin:{ space:15, wide:15, clean:0, head:4, line:-1, toolbar:4, form:8, accordion: 10 },
|
|
//padding - distance insede cell between cell border and cell content
|
|
layoutPadding:{ space:15, wide:0, clean:0, head:0, line:0, toolbar:0, form:8, accordion: 0 },
|
|
//space between tabs in tabbar
|
|
tabMargin:2,
|
|
tabOffset:0,
|
|
tabBottomOffset: 10,
|
|
|
|
calendarHeight: 70,
|
|
padding:0,
|
|
|
|
optionHeight: 27
|
|
};
|
|
webix.skin.glamour = {
|
|
topLayout:"space",
|
|
//bar in accordion
|
|
barHeight:39, //!!!Set the same in skin.less!!!
|
|
tabbarHeight: 39,
|
|
rowHeight:32,
|
|
toolbarHeight:39,
|
|
listItemHeight:32, //list, grouplist, dataview, etc.
|
|
inputHeight:34,
|
|
buttonHeight: 34,
|
|
inputPadding: 3,
|
|
menuHeight: 36,
|
|
labelTopHeight: 16,
|
|
|
|
//margin - distance between cells
|
|
layoutMargin:{ space:15, wide:15, clean:0, head:4, line:-1, toolbar:4, form:8, accordion: 10 },
|
|
//padding - distance insede cell between cell border and cell content
|
|
layoutPadding:{ space:15, wide:0, clean:0, head:0, line:0, toolbar:3, form:8, accordion: 0 },
|
|
//space between tabs in tabbar
|
|
tabMargin:1,
|
|
tabOffset:0,
|
|
tabBottomOffset: 1,
|
|
|
|
calendarHeight: 70,
|
|
padding:0,
|
|
|
|
optionHeight: 27
|
|
};
|
|
webix.skin.touch = {
|
|
topLayout:"space",
|
|
//bar in accordion
|
|
barHeight:42, //!!!Set the same in skin.less!!!
|
|
tabbarHeight: 50,
|
|
rowHeight:42,
|
|
toolbarHeight: 42,
|
|
listItemHeight:42, //list, grouplist, dataview, etc.
|
|
inputHeight:42,
|
|
inputPadding: 4,
|
|
menuHeight: 42,
|
|
labelTopHeight: 24,
|
|
unitHeaderHeight: 34,
|
|
|
|
//margin - distance between cells
|
|
layoutMargin:{ space:10, wide:4, clean:0, head:4, line:-1, toolbar:0, form:0, accordion: 9 },
|
|
//padding - distance insede cell between cell border and cell content
|
|
layoutPadding:{ space:10, wide:0, clean:0, head:0, line:0, toolbar:4, form:8, accordion: 0 },
|
|
//space between tabs in tabbar
|
|
tabMargin:2,
|
|
tabOffset:0,
|
|
tabBottomOffset: 10,
|
|
calendar:{headerHeight: 70, timepickerHeight:35, height: 310, width: 300},
|
|
padding:0,
|
|
customCheckbox: true,
|
|
customRadio: true,
|
|
|
|
optionHeight: 32
|
|
};
|
|
webix.skin.flat = {
|
|
topLayout:"space",
|
|
//bar in accordion
|
|
barHeight:46, //!!!Set the same in skin.less!!!
|
|
tabbarHeight: 46,
|
|
rowHeight:34,
|
|
toolbarHeight:46,
|
|
listItemHeight:34, //list, grouplist, dataview, etc.
|
|
inputHeight: 38,
|
|
buttonHeight: 38,
|
|
inputPadding: 3,
|
|
menuHeight: 34,
|
|
labelTopHeight: 22,
|
|
propertyItemHeight: 28,
|
|
|
|
//margin - distance between cells
|
|
layoutMargin:{ space:10, wide:10, clean:0, head:4, line:-1, toolbar:4, form:8, accordion: 10 },
|
|
//padding - distance insede cell between cell border and cell content
|
|
layoutPadding:{ space:10, wide:0, clean:0, head:0, line:0, toolbar:4, form:17, accordion: 0 },
|
|
//space between tabs in tabbar
|
|
tabMargin:4,
|
|
tabOffset: 0,
|
|
tabBottomOffset: 6,
|
|
tabTopOffset:1,
|
|
|
|
customCheckbox: true,
|
|
customRadio: true,
|
|
|
|
calendarHeight: 70,
|
|
padding:0,
|
|
accordionType: "accordion",
|
|
|
|
optionHeight: 32
|
|
};
|
|
webix.skin.compact = {
|
|
topLayout:"space",
|
|
//bar in accordion
|
|
barHeight:34, //!!!Set the same in skin.less!!!
|
|
tabbarHeight: 34,
|
|
rowHeight:24,
|
|
toolbarHeight:34,
|
|
listItemHeight:28, //list, grouplist, dataview, etc.
|
|
inputHeight: 30,
|
|
buttonHeight: 30,
|
|
inputPadding: 3,
|
|
menuHeight: 28,
|
|
labelTopHeight: 16,
|
|
|
|
//margin - distance between cells
|
|
layoutMargin:{ space:5, wide:5, clean:0, head:4, line:-1, toolbar:4, form:4, accordion: 5 },
|
|
//padding - distance insede cell between cell border and cell content
|
|
layoutPadding:{ space:5, wide:0, clean:0, head:0, line:0, toolbar:2, form:12, accordion: 0 },
|
|
//space between tabs in tabbar
|
|
tabMargin:3,
|
|
tabOffset: 0,
|
|
tabBottomOffset: 3,
|
|
tabTopOffset:1,
|
|
|
|
customCheckbox: true,
|
|
customRadio: true,
|
|
|
|
|
|
calendarHeight: 70,
|
|
padding:0,
|
|
accordionType: "accordion",
|
|
|
|
optionHeight: 23
|
|
};
|
|
webix.skin.material = {
|
|
topLayout:"space",
|
|
//bar in accordion
|
|
barHeight:45, //!!!Set the same in skin.less!!!
|
|
tabbarHeight:47,
|
|
rowHeight:38,
|
|
toolbarHeight:22,
|
|
listItemHeight:34, //list, grouplist, dataview, etc.
|
|
inputHeight:38,
|
|
buttonHeight:38,
|
|
inputPadding: 2,
|
|
menuMargin: 0,
|
|
menuHeight: 34,
|
|
labelTopHeight: 16,
|
|
propertyItemHeight: 34,
|
|
|
|
//margin - distance between cells
|
|
layoutMargin:{ material:10, space:10, wide:10, clean:0, head:4, line:-1, toolbar:4, form:16, accordion: 0 },
|
|
//padding - distance insede cell between cell border and cell content
|
|
layoutPadding:{ material:10, space:10, wide:0, clean:0, head:0, line:0, toolbar:4, form:16, accordion: 0 },
|
|
//space between tabs in tabbar
|
|
tabMargin:0,
|
|
tabOffset: 0,
|
|
tabBottomOffset: 0,
|
|
tabTopOffset:0,
|
|
|
|
customCheckbox: true,
|
|
customRadio: true,
|
|
|
|
calendarHeight: 70,
|
|
padding:0,
|
|
accordionType: "accordion"
|
|
};
|
|
|
|
webix.skin.set = function(name){
|
|
webix.assert(webix.skin[name], "Incorrect skin name: "+name);
|
|
|
|
webix.skin.$active = webix.skin[name];
|
|
webix.skin.$name = name;
|
|
if (webix.ui){
|
|
for (var key in webix.ui){
|
|
var view = webix.ui[key];
|
|
if (view && view.prototype && view.prototype.$skin)
|
|
view.prototype.$skin(view.prototype);
|
|
}
|
|
}
|
|
};
|
|
webix.skin.set(window.webix_skin || "flat");
|
|
|
|
/*
|
|
Behavior:Destruction
|
|
|
|
@export
|
|
destructor
|
|
*/
|
|
|
|
|
|
|
|
webix.Destruction = {
|
|
$init:function(){
|
|
//register self in global list of destructors
|
|
webix.destructors.push(this);
|
|
},
|
|
//will be called automatically on unload, can be called manually
|
|
//simplifies job of GC
|
|
destructor:function(){
|
|
var config = this._settings;
|
|
|
|
if (this._last_editor)
|
|
this.editCancel();
|
|
|
|
if(this.callEvent)
|
|
this.callEvent("onDestruct",[]);
|
|
|
|
this.destructor=function(){}; //destructor can be called only once
|
|
|
|
//destroy child and related cells
|
|
if (this.getChildViews){
|
|
var cells = this.getChildViews();
|
|
if (cells)
|
|
for (var i=0; i < cells.length; i++)
|
|
cells[i].destructor();
|
|
|
|
if (this._destroy_with_me)
|
|
for (var i=0; i < this._destroy_with_me.length; i++)
|
|
this._destroy_with_me[i].destructor();
|
|
}
|
|
|
|
delete webix.ui.views[config.id];
|
|
|
|
if (config.$id){
|
|
var top = this.getTopParentView();
|
|
if (top && top._destroy_child)
|
|
top._destroy_child(config.$id);
|
|
}
|
|
|
|
//html collection
|
|
this._htmlmap = null;
|
|
this._htmlrows = null;
|
|
this._html = null;
|
|
|
|
|
|
if (this._contentobj) {
|
|
this._contentobj.innerHTML="";
|
|
this._contentobj._htmlmap = null;
|
|
}
|
|
|
|
//removes view container
|
|
if (this._viewobj&&this._viewobj.parentNode){
|
|
this._viewobj.parentNode.removeChild(this._viewobj);
|
|
}
|
|
|
|
if (this.data && this.data.destructor)
|
|
this.data.destructor();
|
|
|
|
if (this.unbind)
|
|
this.unbind();
|
|
|
|
this.data = null;
|
|
this._viewobj = this.$view = this._contentobj = this._dataobj = null;
|
|
this._evs_events = this._evs_handlers = {};
|
|
|
|
//remove focus from destructed view
|
|
if (webix.UIManager._view == this)
|
|
webix.UIManager._view = null;
|
|
|
|
var url = config.url;
|
|
if (url && url.$proxy && url.release)
|
|
url.release();
|
|
|
|
this.$scope = null;
|
|
// this flag is checked in delay method
|
|
this.$destructed = true;
|
|
}
|
|
};
|
|
//global list of destructors
|
|
webix.destructors = [];
|
|
webix.event(window,"unload",function(){
|
|
webix.callEvent("unload", []);
|
|
webix._final_destruction = true;
|
|
|
|
//call all registered destructors
|
|
for (var i=0; i<webix.destructors.length; i++)
|
|
webix.destructors[i].destructor();
|
|
webix.destructors = [];
|
|
webix.ui._popups = webix.toArray();
|
|
|
|
//detach all known DOM events
|
|
for (var a in webix._events){
|
|
var ev = webix._events[a];
|
|
if (ev[0].removeEventListener)
|
|
ev[0].removeEventListener(ev[1],ev[2],false);
|
|
else if (ev[0].detachEvent)
|
|
ev[0].detachEvent("on"+ev[1],ev[2]);
|
|
delete webix._events[a];
|
|
}
|
|
});
|
|
|
|
/*
|
|
Behavior:Settings
|
|
|
|
@export
|
|
customize
|
|
config
|
|
*/
|
|
|
|
/*
|
|
Template - handles html templates
|
|
*/
|
|
|
|
|
|
|
|
(function(){
|
|
|
|
var _cache = {};
|
|
var _csp_cache = {};
|
|
var newlines = new RegExp("(\\r\\n|\\n)","g");
|
|
var quotes = new RegExp("(\\\")","g");
|
|
var slashes = new RegExp("(\\\\)","g");
|
|
var escape = {
|
|
"&": "&",
|
|
"<": "<",
|
|
">": ">",
|
|
'"': """,
|
|
"'": "'",
|
|
"`": "`"
|
|
};
|
|
var badChars = /[&<>"'`]/g;
|
|
var escapeChar = function(chr) {
|
|
return escape[chr] || "&";
|
|
};
|
|
|
|
|
|
webix.template = function(str){
|
|
if (typeof str == "function") return str;
|
|
if (_cache[str])
|
|
return _cache[str];
|
|
|
|
str=(str||"").toString();
|
|
if (str.indexOf("->")!=-1){
|
|
var teststr = str.split("->");
|
|
switch(teststr[0]){
|
|
case "html": //load from some container on the page
|
|
str = webix.html.getValue(teststr[1]);
|
|
break;
|
|
case "http": //load from external file
|
|
str = new webix.ajax().sync().get(teststr[1],{uid:webix.uid()}).responseText;
|
|
break;
|
|
default:
|
|
//do nothing, will use template as is
|
|
break;
|
|
}
|
|
}
|
|
|
|
//supported idioms
|
|
// {obj.attr} => named attribute or value of sub-tag in case of xml
|
|
str=(str||"").toString();
|
|
|
|
// Content Security Policy enabled
|
|
if(webix.env.strict){
|
|
if (!_csp_cache[str]){
|
|
_csp_cache[str] = [];
|
|
|
|
// get an array of objects (not sorted by position)
|
|
var temp_res = [];
|
|
str.replace(/\{obj\.([^}?]+)\?([^:]*):([^}]*)\}/g,function(search,s1,s2,s3,pos){
|
|
temp_res.push({pos: pos, str: search, fn: function(obj,common){
|
|
return obj[s1]?s2:s3;
|
|
}});
|
|
});
|
|
str.replace(/\{common\.([^}\(]*)\}/g,function(search,s,pos){
|
|
temp_res.push({pos: pos, str: search, fn: function(obj,common){
|
|
return common[s]||'';
|
|
}});
|
|
});
|
|
str.replace(/\{common\.([^\}\(]*)\(\)\}/g,function(search,s,pos){
|
|
temp_res.push({pos: pos, str: search, fn: function(obj,common){
|
|
return (common[s]?common[s].apply(this, arguments):"");
|
|
}});
|
|
});
|
|
str.replace(/\{obj\.([^:}]*)\}/g,function(search,s,pos){
|
|
temp_res.push({pos: pos, str: search, fn: function(obj,common){
|
|
return obj[s];
|
|
}});
|
|
});
|
|
str.replace("{obj}",function(search,s,pos){
|
|
temp_res.push({pos: pos, str: search, fn: function(obj,common){
|
|
return obj;
|
|
}});
|
|
});
|
|
str.replace(/#([^#'";, ]+)#/gi,function(search,s,pos){
|
|
if(s.charAt(0)=="!"){
|
|
temp_res.push({pos: pos, str: search, fn: function(obj,common){
|
|
s = s.substr(1);
|
|
if(s.indexOf(".")!= -1)
|
|
obj = webix.CodeParser.collapseNames(obj); // apply complex properties
|
|
return webix.template.escape(obj[s.substr(1)]);
|
|
}});
|
|
}
|
|
else{
|
|
temp_res.push({pos: pos, str: search, fn: function(obj,common){
|
|
if(s.indexOf(".")!= -1)
|
|
obj = webix.CodeParser.collapseNames(obj); // apply complex properties
|
|
return obj[s];
|
|
}});
|
|
}
|
|
|
|
});
|
|
|
|
// sort template parts by position
|
|
temp_res.sort(function(a,b){
|
|
return (a.pos > b.pos)?1:-1;
|
|
});
|
|
|
|
// create an array of functions that return parts of html string
|
|
if(temp_res.length){
|
|
var lastPos = 0;
|
|
var addStr = function(str,n0,n1){
|
|
_csp_cache[str].push(function(){
|
|
return str.slice(n0,n1);
|
|
});
|
|
};
|
|
for(var i = 0; i< temp_res.length; i++){
|
|
var pos = temp_res[i].pos;
|
|
addStr(str,lastPos,pos);
|
|
_csp_cache[str].push(temp_res[i].fn);
|
|
lastPos = pos + temp_res[i].str.length;
|
|
}
|
|
addStr(str,lastPos,str.length);
|
|
}
|
|
else
|
|
_csp_cache[str].push(function(){return str;});
|
|
}
|
|
return function(){
|
|
var s = "";
|
|
for(var i=0; i < _csp_cache[str].length;i++){
|
|
s += _csp_cache[str][i].apply(this,arguments);
|
|
}
|
|
return s;
|
|
};
|
|
}
|
|
|
|
str=str.replace(slashes,"\\\\");
|
|
str=str.replace(newlines,"\\n");
|
|
str=str.replace(quotes,"\\\"");
|
|
|
|
str=str.replace(/\{obj\.([^}?]+)\?([^:]*):([^}]*)\}/g,"\"+(obj.$1?\"$2\":\"$3\")+\"");
|
|
str=str.replace(/\{common\.([^}\(]*)\}/g,"\"+(common.$1||'')+\"");
|
|
str=str.replace(/\{common\.([^\}\(]*)\(\)\}/g,"\"+(common.$1?common.$1.apply(this, arguments):\"\")+\"");
|
|
str=str.replace(/\{obj\.([^}]*)\}/g,"\"+(obj.$1)+\"");
|
|
str=str.replace("{obj}","\"+obj+\"");
|
|
str=str.replace(/#([^#'";, ]+)#/gi,function(str, key){
|
|
if (key.charAt(0)=="!")
|
|
return "\"+webix.template.escape(obj."+key.substr(1)+")+\"";
|
|
else
|
|
return "\"+(obj."+key+")+\"";
|
|
});
|
|
|
|
try {
|
|
_cache[str] = Function("obj","common","return \""+str+"\";");
|
|
} catch(e){
|
|
webix.assert_error("Invalid template:"+str);
|
|
}
|
|
|
|
return _cache[str];
|
|
};
|
|
|
|
|
|
|
|
webix.template.escape = function(str){
|
|
if (str === webix.undefined || str === null) return "";
|
|
return (str.toString() || "" ).replace(badChars, escapeChar);
|
|
};
|
|
webix.template.empty=function(){ return ""; };
|
|
webix.template.bind =function(value){ return webix.bind(webix.template(value),this); };
|
|
|
|
|
|
/*
|
|
adds new template-type
|
|
obj - object to which template will be added
|
|
data - properties of template
|
|
*/
|
|
webix.type=function(obj, data){
|
|
if (obj.$protoWait){
|
|
if (!obj._webix_type_wait)
|
|
obj._webix_type_wait = [];
|
|
obj._webix_type_wait.push(data);
|
|
return;
|
|
}
|
|
|
|
//auto switch to prototype, if name of class was provided
|
|
if (typeof obj == "function")
|
|
obj = obj.prototype;
|
|
if (!obj.types){
|
|
obj.types = { "default" : obj.type };
|
|
obj.type.name = "default";
|
|
}
|
|
|
|
var name = data.name;
|
|
var type = obj.type;
|
|
if (name)
|
|
type = obj.types[name] = webix.clone(data.baseType?obj.types[data.baseType]:obj.type);
|
|
|
|
for(var key in data){
|
|
if (key.indexOf("template")===0)
|
|
type[key] = webix.template(data[key]);
|
|
else
|
|
type[key]=data[key];
|
|
}
|
|
|
|
return name;
|
|
};
|
|
|
|
})();
|
|
|
|
|
|
webix.Settings={
|
|
$init:function(){
|
|
/*
|
|
property can be accessed as this.config.some
|
|
in same time for inner call it have sense to use _settings
|
|
because it will be minified in final version
|
|
*/
|
|
this._settings = this.config= {};
|
|
},
|
|
define:function(property, value){
|
|
if (typeof property == "object")
|
|
return this._parseSeetingColl(property);
|
|
return this._define(property, value);
|
|
},
|
|
_define:function(property,value){
|
|
//method with name {prop}_setter will be used as property setter
|
|
//setter is optional
|
|
var setter = this[property+"_setter"];
|
|
return (this._settings[property]=setter?setter.call(this,value,property):value);
|
|
},
|
|
//process configuration object
|
|
_parseSeetingColl:function(coll){
|
|
if (coll){
|
|
for (var a in coll) //for each setting
|
|
this._define(a,coll[a]); //set value through config
|
|
}
|
|
},
|
|
//helper for object initialization
|
|
_parseSettings:function(obj,initial){
|
|
//initial - set of default values
|
|
var settings = {};
|
|
if (initial)
|
|
settings = webix.extend(settings,initial);
|
|
|
|
//code below will copy all properties over default one
|
|
if (typeof obj == "object" && !obj.tagName)
|
|
webix.extend(settings,obj, true);
|
|
//call config for each setting
|
|
this._parseSeetingColl(settings);
|
|
},
|
|
_mergeSettings:function(config, defaults){
|
|
for (var key in defaults)
|
|
switch(typeof config[key]){
|
|
case "object":
|
|
config[key] = this._mergeSettings((config[key]||{}), defaults[key]);
|
|
break;
|
|
case "undefined":
|
|
config[key] = defaults[key];
|
|
break;
|
|
default: //do nothing
|
|
break;
|
|
}
|
|
return config;
|
|
}
|
|
};
|
|
/*
|
|
ajax operations
|
|
|
|
can be used for direct loading as
|
|
webix.ajax(ulr, callback)
|
|
or
|
|
webix.ajax().getItem(url)
|
|
webix.ajax().post(url)
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
webix.proxy = function(name, source, extra){
|
|
webix.assert(webix.proxy[name], "Invalid proxy name: "+name);
|
|
|
|
var copy = webix.copy(webix.proxy[name]);
|
|
copy.source = source;
|
|
|
|
if (extra)
|
|
webix.extend(copy, extra, true);
|
|
|
|
if (copy.init) copy.init();
|
|
return copy;
|
|
};
|
|
|
|
webix.proxy.$parse = function(value){
|
|
if (typeof value == "string" && value.indexOf("->") != -1){
|
|
var parts = value.split("->");
|
|
return webix.proxy(parts[0], parts[1]);
|
|
}
|
|
return value;
|
|
};
|
|
|
|
webix.proxy.post = {
|
|
$proxy:true,
|
|
load:function(view, callback, params){
|
|
params = webix.extend(params||{}, this.params || {}, true);
|
|
webix.ajax().bind(view).post(this.source, params, callback);
|
|
}
|
|
};
|
|
|
|
webix.proxy.sync = {
|
|
$proxy:true,
|
|
load:function(view, callback){
|
|
webix.ajax().sync().bind(view).get(this.source, null, callback);
|
|
}
|
|
};
|
|
|
|
webix.proxy.connector = {
|
|
$proxy:true,
|
|
|
|
connectorName:"!nativeeditor_status",
|
|
load:function(view, callback){
|
|
webix.ajax(this.source, callback, view);
|
|
},
|
|
saveAll:function(view, updates, dp, callback){
|
|
var url = this.source;
|
|
|
|
var data = {};
|
|
var ids = [];
|
|
for (var i = 0; i < updates.length; i++) {
|
|
var action = updates[i];
|
|
ids.push(action.id);
|
|
|
|
for (var j in action.data)
|
|
if (j.indexOf("$")!==0)
|
|
data[action.id+"_"+j] = action.data[j];
|
|
data[action.id+"_"+this.connectorName] = action.operation;
|
|
}
|
|
|
|
data.ids = ids.join(",");
|
|
data.webix_security = webix.securityKey;
|
|
|
|
url += (url.indexOf("?") == -1) ? "?" : "&";
|
|
url += "editing=true";
|
|
|
|
webix.ajax().post(url, data, callback);
|
|
},
|
|
result:function(state, view, dp, text, data, loader){
|
|
data = data.xml();
|
|
if (!data)
|
|
return dp._processError(null, text, data, loader);
|
|
|
|
|
|
var actions = data.data.action;
|
|
if (!actions.length)
|
|
actions = [actions];
|
|
|
|
|
|
var hash = [];
|
|
|
|
for (var i = 0; i < actions.length; i++) {
|
|
var obj = actions[i];
|
|
hash.push(obj);
|
|
|
|
obj.status = obj.type;
|
|
obj.id = obj.sid;
|
|
obj.newid = obj.tid;
|
|
|
|
dp.processResult(obj, obj, {text:text, data:data, loader:loader});
|
|
}
|
|
|
|
return hash;
|
|
}
|
|
};
|
|
|
|
webix.proxy.debug = {
|
|
$proxy:true,
|
|
load:function(){},
|
|
save:function(v,u,d,c){
|
|
webix.delay(function(){
|
|
window.console.log("[DP] "+u.id+" -> "+u.operation, u.data);
|
|
var data = {
|
|
id:u.data.id,
|
|
newid:u.data.id,
|
|
status:u.data.operation
|
|
};
|
|
d.processResult(data, data);
|
|
});
|
|
}
|
|
};
|
|
|
|
webix.proxy.rest = {
|
|
$proxy:true,
|
|
load:function(view, callback){
|
|
webix.ajax(this.source, callback, view);
|
|
},
|
|
save:function(view, update, dp, callback){
|
|
return webix.proxy.rest._save_logic.call(this, view, update, dp, callback, webix.ajax());
|
|
},
|
|
_save_logic:function(view, update, dp, callback, ajax){
|
|
var url = this.source;
|
|
url += url.charAt(url.length-1) == "/" ? "" : "/";
|
|
var mode = update.operation;
|
|
|
|
var data = update.data;
|
|
if (mode == "insert") delete data.id;
|
|
|
|
//call rest URI
|
|
if (mode == "update"){
|
|
ajax.put(url + data.id, data, callback);
|
|
} else if (mode == "delete") {
|
|
ajax.del(url + data.id, data, callback);
|
|
} else {
|
|
ajax.post(url, data, callback);
|
|
}
|
|
}
|
|
};
|
|
|
|
webix.proxy.json = {
|
|
$proxy:true,
|
|
load:function(view, callback){
|
|
webix.ajax(this.source, callback, view);
|
|
},
|
|
save:function(view, update, dp, callback){
|
|
var ajax = webix.ajax().headers({ "Content-Type":"application/json" });
|
|
return webix.proxy.rest._save_logic.call(this, view, update, dp, callback, ajax);
|
|
}
|
|
};
|
|
|
|
webix.proxy.faye = {
|
|
$proxy:true,
|
|
init:function(){
|
|
this.clientId = this.clientId || webix.uid();
|
|
},
|
|
load:function(view){
|
|
var selfid = this.clientId;
|
|
|
|
this.client.subscribe(this.source, function(update){
|
|
if (update.clientId == selfid) return;
|
|
|
|
webix.dp(view).ignore(function(){
|
|
if (update.operation == "delete")
|
|
view.remove(update.data.id);
|
|
else if (update.operation == "insert")
|
|
view.add(update.data);
|
|
else if (update.operation == "update"){
|
|
var item = view.getItem(update.data.id);
|
|
if (item){
|
|
webix.extend(item, update.data, true);
|
|
view.refresh(item.id);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
},
|
|
save:function(view, update, dp, callback){
|
|
update.clientId = this.clientId;
|
|
this.client.publish(this.source, update);
|
|
}
|
|
};
|
|
|
|
//indexdb->database/collection
|
|
webix.proxy.indexdb = {
|
|
$proxy:true,
|
|
create:function(db, config, version, callback){
|
|
this.source = db + "/";
|
|
this._get_db(callback, version, function(e){
|
|
var db = e.target.result;
|
|
for (var key in config){
|
|
var data = config[key];
|
|
var store = db.createObjectStore(key, { keyPath: "id", autoIncrement:true });
|
|
for (var i = 0; i < data.length; i++)
|
|
store.put(data[i]);
|
|
}
|
|
});
|
|
},
|
|
_get_db:function(callback, version, upgrade){
|
|
if (this.source.indexOf("/") != -1){
|
|
var parts = this.source.split("/");
|
|
this.source = parts[1];
|
|
version = version || parts[2];
|
|
|
|
var _index = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
|
|
|
|
var db;
|
|
if (version)
|
|
db = _index.open(parts[0], version);
|
|
else
|
|
db = _index.open(parts[0]);
|
|
|
|
if (upgrade)
|
|
db.onupgradeneeded = upgrade;
|
|
db.onerror = function(){ };
|
|
db.onblocked = function(){ };
|
|
db.onsuccess = webix.bind(function(e){
|
|
this.db = e.target.result;
|
|
if (callback)
|
|
callback.call(this);
|
|
},this);
|
|
} else if (this.db)
|
|
callback.call(this);
|
|
else
|
|
webix.delay(this._get_db, this, [callback], 50);
|
|
},
|
|
|
|
load:function(view, callback){
|
|
this._get_db(function(){
|
|
var store = this.db.transaction(this.source).objectStore(this.source);
|
|
var data = [];
|
|
|
|
store.openCursor().onsuccess = function(e) {
|
|
var result = e.target.result;
|
|
if(result){
|
|
data.push(result.value);
|
|
result["continue"]();
|
|
} else {
|
|
view.parse(data);
|
|
webix.ajax.$callback(view, callback, "[]", data);
|
|
}
|
|
};
|
|
});
|
|
},
|
|
save:function(view, update, dp, callback){
|
|
this._get_db(function(){
|
|
var mode = update.operation;
|
|
var data = update.data;
|
|
var id = update.id;
|
|
|
|
var store = this.db.transaction([this.source], "readwrite").objectStore(this.source);
|
|
|
|
var req;
|
|
if (mode == "delete")
|
|
req = store["delete"](id);
|
|
else if (mode == "update")
|
|
req = store.put(data);
|
|
else if (mode == "insert"){
|
|
delete data.id;
|
|
req = store.add(data);
|
|
}
|
|
|
|
req.onsuccess = function(e) {
|
|
var result = { status: mode, id:update.id };
|
|
if (mode == "insert")
|
|
result.newid = e.target.result;
|
|
dp.processResult(result, result);
|
|
};
|
|
});
|
|
}
|
|
};
|
|
|
|
webix.proxy.binary = {
|
|
$proxy:true,
|
|
load:function(view, callback){
|
|
var parts = this.source.split("@");
|
|
var ext = parts[0].split(".").pop();
|
|
return webix.ajax().response("arraybuffer").get(parts[0]).then(function(res){
|
|
var options = { ext:ext, dataurl : parts[1] };
|
|
webix.ajax.$callback(view, callback, "", { data:res, options:options }, -1);
|
|
});
|
|
}
|
|
};
|
|
|
|
webix.ajax = function(url,params,call){
|
|
//if parameters was provided - made fast call
|
|
if (arguments.length!==0)
|
|
return (new webix.ajax()).get(url,params,call);
|
|
|
|
if (!this.getXHR) return new webix.ajax(); //allow to create new instance without direct new declaration
|
|
|
|
return this;
|
|
};
|
|
webix.ajax.count = 0;
|
|
webix.ajax.prototype={
|
|
master:null,
|
|
//creates xmlHTTP object
|
|
getXHR:function(){
|
|
return new XMLHttpRequest();
|
|
},
|
|
stringify:function(obj){
|
|
var origin = Date.prototype.toJSON;
|
|
Date.prototype.toJSON = function(){
|
|
return webix.i18n.parseFormatStr(this);
|
|
};
|
|
|
|
var result;
|
|
if (obj instanceof Date)
|
|
result = obj.toJSON();
|
|
else
|
|
result = JSON.stringify(obj);
|
|
|
|
Date.prototype.toJSON = origin;
|
|
return result;
|
|
},
|
|
/*
|
|
send data to the server
|
|
params - hash of properties which will be added to the url
|
|
call - callback, can be an array of functions
|
|
*/
|
|
_send:function(url, params, call, mode){
|
|
var master;
|
|
if (params && (webix.isArray(params) || (typeof (params.success || params.error || params) == "function"))){
|
|
master = call;
|
|
call = params;
|
|
params = null;
|
|
}
|
|
|
|
var defer = webix.promise.defer();
|
|
|
|
var x=this.getXHR();
|
|
if (!webix.isArray(call))
|
|
call = [call];
|
|
|
|
call.push({ success: function(t, d){ defer.resolve(d); },
|
|
error: function(t, d){ defer.reject(x); }});
|
|
|
|
var headers = this._header || {};
|
|
|
|
if (!webix.callEvent("onBeforeAjax", [mode, url, params, x, headers, null, defer])) return;
|
|
|
|
//add content-type to POST|PUT|DELETE
|
|
var json_mode = false;
|
|
if (mode !== 'GET'){
|
|
var found = false;
|
|
for (var key in headers)
|
|
if (key.toString().toLowerCase() == "content-type"){
|
|
found = true;
|
|
if (headers[key] == "application/json")
|
|
json_mode = true;
|
|
}
|
|
if (!found)
|
|
headers['Content-Type'] = 'application/x-www-form-urlencoded';
|
|
}
|
|
|
|
//add extra params to the url
|
|
if (typeof params == "object"){
|
|
if (json_mode)
|
|
params = this.stringify(params);
|
|
else {
|
|
var t=[];
|
|
for (var a in params){
|
|
var value = params[a];
|
|
if (value === null || value === webix.undefined)
|
|
value = "";
|
|
if(typeof value==="object")
|
|
value = this.stringify(value);
|
|
t.push(a+"="+encodeURIComponent(value));// utf-8 escaping
|
|
}
|
|
params=t.join("&");
|
|
}
|
|
}
|
|
|
|
if (params && mode==='GET'){
|
|
url=url+(url.indexOf("?")!=-1 ? "&" : "?")+params;
|
|
params = null;
|
|
}
|
|
|
|
x.open(mode, url, !this._sync);
|
|
|
|
var type = this._response;
|
|
if (type) x.responseType = type;
|
|
|
|
//if header was provided - use it
|
|
for (var key in headers)
|
|
x.setRequestHeader(key, headers[key]);
|
|
|
|
//async mode, define loading callback
|
|
var self=this;
|
|
this.master = this.master || master;
|
|
x.onreadystatechange = function(){
|
|
if (!x.readyState || x.readyState == 4){
|
|
if (webix.debug_time) webix.log_full_time("data_loading"); //log rendering time
|
|
|
|
webix.ajax.count++;
|
|
if (call && self && !x.aborted){
|
|
//IE8 and IE9, handling .abort call
|
|
if (webix._xhr_aborted.find(x) != -1)
|
|
return webix._xhr_aborted.remove(x);
|
|
|
|
var owner = self.master||self;
|
|
|
|
var is_error = x.status >= 400 || x.status === 0;
|
|
var text, data;
|
|
if (x.responseType == "blob" || x.responseType == "arraybuffer"){
|
|
text = "";
|
|
data = x.response;
|
|
} else {
|
|
text = x.responseText||"";
|
|
data = self._data(x);
|
|
}
|
|
|
|
webix.ajax.$callback(owner, call, text, data, x, is_error);
|
|
}
|
|
if (self) self.master=null;
|
|
call=self=master=null; //anti-leak
|
|
}
|
|
};
|
|
|
|
if (this._timeout)
|
|
x.timeout = this._timeout;
|
|
|
|
//IE can use sync mode sometimes, fix it
|
|
if (!this._sync)
|
|
setTimeout(function(){
|
|
if (!x.aborted){
|
|
//abort handling in IE9
|
|
if (webix._xhr_aborted.find(x) != -1)
|
|
webix._xhr_aborted.remove(x);
|
|
else
|
|
x.send(params||null);
|
|
}
|
|
}, 1);
|
|
else
|
|
x.send(params||null);
|
|
|
|
if (this.master && this.master._ajax_queue)
|
|
this.master._ajax_queue.push(x);
|
|
|
|
return this._sync?x:defer; //return XHR, which can be used in case of sync. mode
|
|
},
|
|
_data:function(x){
|
|
return {
|
|
xml:function(){ try{ return webix.DataDriver.xml.tagToObject(webix.DataDriver.xml.toObject(x.responseText, this)); }
|
|
catch(e){
|
|
webix.log(x.responseText);
|
|
webix.log(e.toString()); webix.assert_error("Invalid xml data for parsing");
|
|
}
|
|
},
|
|
rawxml:function(){
|
|
if (!window.XPathResult)
|
|
return webix.DataDriver.xml.fromString(x.responseText);
|
|
return x.responseXML;
|
|
},
|
|
text:function(){ return x.responseText; },
|
|
json:function(){
|
|
try{
|
|
return JSON.parse(x.responseText);
|
|
}
|
|
catch(e){
|
|
webix.log(x.responseText);
|
|
webix.log(e.toString()); webix.assert_error("Invalid json data for parsing");
|
|
}
|
|
}
|
|
};
|
|
},
|
|
//GET request
|
|
get:function(url,params,call){
|
|
return this._send(url,params,call,"GET");
|
|
},
|
|
//POST request
|
|
post:function(url,params,call){
|
|
return this._send(url,params,call,"POST");
|
|
},
|
|
//PUT request
|
|
put:function(url,params,call){
|
|
return this._send(url,params,call,"PUT");
|
|
},
|
|
//DELETE request
|
|
del:function(url,params,call){
|
|
return this._send(url,params,call,"DELETE");
|
|
},
|
|
//PATCH request
|
|
patch:function(url,params,call){
|
|
return this._send(url,params,call,"PATCH");
|
|
},
|
|
|
|
sync:function(){
|
|
this._sync = true;
|
|
return this;
|
|
},
|
|
timeout:function(num){
|
|
this._timeout = num;
|
|
return this;
|
|
},
|
|
response:function(value){
|
|
this._response = value;
|
|
return this;
|
|
},
|
|
//deprecated, remove in 3.0
|
|
//[DEPRECATED]
|
|
header:function(header){
|
|
webix.assert(false, "ajax.header is deprecated in favor of ajax.headers");
|
|
this._header = header;
|
|
return this;
|
|
},
|
|
headers:function(header){
|
|
this._header = webix.extend(this._header||{},header);
|
|
return this;
|
|
},
|
|
bind:function(master){
|
|
this.master = master;
|
|
return this;
|
|
}
|
|
};
|
|
webix.ajax.$callback = function(owner, call, text, data, x, is_error){
|
|
if (owner.$destructed) return;
|
|
if (x === -1 && data && typeof data.json == "function")
|
|
data = data.json();
|
|
|
|
if (is_error)
|
|
webix.callEvent("onAjaxError", [x]);
|
|
|
|
if (!webix.isArray(call))
|
|
call = [call];
|
|
|
|
if (!is_error)
|
|
for (var i=0; i < call.length; i++){
|
|
if (call[i]){
|
|
var before = call[i].before;
|
|
if (before)
|
|
before.call(owner, text, data, x);
|
|
}
|
|
}
|
|
|
|
for (var i=0; i < call.length; i++) //there can be multiple callbacks
|
|
if (call[i]){
|
|
var method = (call[i].success||call[i]);
|
|
if (is_error)
|
|
method = call[i].error;
|
|
if (method && method.call)
|
|
method.call(owner,text,data,x);
|
|
}
|
|
};
|
|
|
|
/*submits values*/
|
|
webix.send = function(url, values, method, target){
|
|
var form = webix.html.create("FORM",{
|
|
"target":(target||"_self"),
|
|
"action":url,
|
|
"method":(method||"POST")
|
|
},"");
|
|
for (var k in values) {
|
|
var field = webix.html.create("INPUT",{"type":"hidden","name": k,"value": values[k]},"");
|
|
form.appendChild(field);
|
|
}
|
|
form.style.display = "none";
|
|
document.body.appendChild(form);
|
|
form.submit();
|
|
document.body.removeChild(form);
|
|
};
|
|
|
|
|
|
webix.AtomDataLoader={
|
|
$init:function(config){
|
|
//prepare data store
|
|
this.data = {};
|
|
this.waitData = webix.promise.defer();
|
|
|
|
if (config)
|
|
this._settings.datatype = config.datatype||"json";
|
|
this.$ready.push(this._load_when_ready);
|
|
},
|
|
_load_when_ready:function(){
|
|
this._ready_for_data = true;
|
|
|
|
if (this._settings.url)
|
|
this.url_setter(this._settings.url);
|
|
if (this._settings.data)
|
|
this.data_setter(this._settings.data);
|
|
},
|
|
url_setter:function(value){
|
|
value = webix.proxy.$parse(value);
|
|
|
|
if (!this._ready_for_data) return value;
|
|
this.load(value, this._settings.datatype);
|
|
return value;
|
|
},
|
|
data_setter:function(value){
|
|
if (!this._ready_for_data) return value;
|
|
this.parse(value, this._settings.datatype);
|
|
return true;
|
|
},
|
|
//loads data from external URL
|
|
load:function(url,call){
|
|
var details = arguments[2] || null;
|
|
|
|
this.callEvent("onBeforeLoad",[]);
|
|
if (typeof call == "string"){ //second parameter can be a loading type or callback
|
|
//we are not using setDriver as data may be a non-datastore here
|
|
this.data.driver = webix.DataDriver[call];
|
|
call = arguments[2];
|
|
} else if (!this.data.driver)
|
|
this.data.driver = webix.DataDriver.json;
|
|
|
|
//load data by async ajax call
|
|
//loading_key - can be set by component, to ignore data from old async requests
|
|
var callback = [{
|
|
success: this._onLoad,
|
|
error: this._onLoadError
|
|
}];
|
|
|
|
if (call){
|
|
if (webix.isArray(call))
|
|
callback.push.apply(callback,call);
|
|
else
|
|
callback.push(call);
|
|
}
|
|
|
|
//proxy
|
|
url = webix.proxy.$parse(url);
|
|
if (url.$proxy && url.load)
|
|
return url.load(this, callback, details);
|
|
|
|
//promize
|
|
if (typeof url === "function"){
|
|
return url(details).then(
|
|
webix.bind(function(data){
|
|
webix.ajax.$callback(this, callback, "", data, -1);
|
|
}, this),
|
|
webix.bind(function(x){
|
|
webix.ajax.$callback(this, callback, "", null, x, true);
|
|
}, this)
|
|
);
|
|
}
|
|
|
|
//normal url
|
|
return webix.ajax(url,callback,this);
|
|
},
|
|
//loads data from object
|
|
parse:function(data,type){
|
|
//[webix.remote]
|
|
if (data && data.then && typeof data.then == "function"){
|
|
return data.then(webix.bind(function(data){
|
|
if (data && typeof data.json == "function")
|
|
data = data.json();
|
|
this.parse(data, type);
|
|
}, this));
|
|
}
|
|
|
|
//loading data from other component
|
|
if (data && data.sync && this.sync)
|
|
return this.sync(data);
|
|
|
|
this.callEvent("onBeforeLoad",[]);
|
|
this.data.driver = webix.DataDriver[type||"json"];
|
|
this._onLoad(data,null);
|
|
},
|
|
_parse:function(data){
|
|
var driver = this.data.driver;
|
|
var parsed = driver.getDetails(driver.getRecords(data)[0]);
|
|
if (this.setValues)
|
|
this.setValues(parsed);
|
|
else
|
|
this.data = parsed;
|
|
},
|
|
_onLoadContinue:function(data, text, response, loader){
|
|
if (data){
|
|
if(!this.$onLoad || !this.$onLoad(data, this.data.driver)){
|
|
if(this.data && this.data._parse)
|
|
this.data._parse(data); //datastore
|
|
else
|
|
this._parse(data);
|
|
}
|
|
}
|
|
else
|
|
this._onLoadError(text, response, loader);
|
|
|
|
//data loaded, view rendered, call onready handler
|
|
if(this._call_onready)
|
|
this._call_onready();
|
|
|
|
this.callEvent("onAfterLoad",[]);
|
|
this.waitData.resolve();
|
|
},
|
|
//default after loading callback
|
|
_onLoad:function(text, response, loader){
|
|
var driver = this.data.driver;
|
|
var data;
|
|
|
|
if (loader === -1)
|
|
data = driver.toObject(response);
|
|
else{
|
|
//ignore data loading command if data was reloaded
|
|
if(this._ajax_queue)
|
|
this._ajax_queue.remove(loader);
|
|
data = driver.toObject(text, response);
|
|
}
|
|
|
|
if(!data || !data.then)
|
|
this._onLoadContinue(data);
|
|
else if(data.then && typeof data.then == "function")
|
|
data.then(webix.bind(this._onLoadContinue, this));
|
|
},
|
|
_onLoadError:function(text, xml, xhttp){
|
|
this.callEvent("onAfterLoad",[]);
|
|
this.callEvent("onLoadError",arguments);
|
|
webix.callEvent("onLoadError", [text, xml, xhttp, this]);
|
|
},
|
|
_check_data_feed:function(data){
|
|
if (!this._settings.dataFeed || this._ignore_feed || !data) return true;
|
|
var url = this._settings.dataFeed;
|
|
if (typeof url == "function")
|
|
return url.call(this, (data.id||data), data);
|
|
url = url+(url.indexOf("?")==-1?"?":"&")+"action=get&id="+encodeURIComponent(data.id||data);
|
|
this.callEvent("onBeforeLoad",[]);
|
|
webix.ajax(url, function(text,xml,loader){
|
|
this._ignore_feed=true;
|
|
var driver = webix.DataDriver.json;
|
|
var data = driver.toObject(text, xml);
|
|
if (data)
|
|
this.setValues(driver.getDetails(driver.getRecords(data)[0]));
|
|
else
|
|
this._onLoadError(text,xml,loader);
|
|
this._ignore_feed=false;
|
|
this.callEvent("onAfterLoad",[]);
|
|
}, this);
|
|
return false;
|
|
}
|
|
};
|
|
|
|
/*
|
|
Abstraction layer for different data types
|
|
*/
|
|
|
|
webix.DataDriver={};
|
|
webix.DataDriver.json={
|
|
//convert json string to json object if necessary
|
|
toObject:function(data){
|
|
if (!data) return null;
|
|
if (typeof data == "string"){
|
|
try{
|
|
if (this.parseDates){
|
|
var isodate = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(.\d{3})?Z/;
|
|
data = JSON.parse(data, function(key, value){
|
|
if (typeof value == "string"){
|
|
if (isodate.test(value))
|
|
return new Date(value);
|
|
}
|
|
return value;
|
|
});
|
|
} else {
|
|
data =JSON.parse(data);
|
|
}
|
|
} catch(e){
|
|
webix.assert_error(e);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
return data;
|
|
},
|
|
//get array of records
|
|
getRecords:function(data){
|
|
if (data && data.data)
|
|
data = data.data;
|
|
|
|
if (data && !webix.isArray(data))
|
|
return [data];
|
|
return data;
|
|
},
|
|
//get hash of properties for single record
|
|
getDetails:function(data){
|
|
if (typeof data == "string")
|
|
return { id:(data||webix.uid()), value:data };
|
|
return data;
|
|
},
|
|
getOptions:function(data){
|
|
return data.collections;
|
|
},
|
|
//get count of data and position at which new data need to be inserted
|
|
getInfo:function(data){
|
|
return {
|
|
_size:(data.total_count||0),
|
|
_from:(data.pos||0),
|
|
_parent:(data.parent||0),
|
|
_config:(data.config),
|
|
_key:(data.webix_security)
|
|
};
|
|
},
|
|
child:"data",
|
|
parseDates:false
|
|
};
|
|
|
|
webix.DataDriver.html={
|
|
/*
|
|
incoming data can be
|
|
- ID of parent container
|
|
- HTML text
|
|
*/
|
|
toObject:function(data){
|
|
if (typeof data == "string"){
|
|
var t=null;
|
|
if (data.indexOf("<")==-1) //if no tags inside - probably its an ID
|
|
t = webix.toNode(data);
|
|
if (!t){
|
|
t=document.createElement("DIV");
|
|
t.innerHTML = data;
|
|
}
|
|
|
|
return t.firstChild;
|
|
}
|
|
return data;
|
|
},
|
|
//get array of records
|
|
getRecords:function(node){
|
|
return node.getElementsByTagName(this.tag);
|
|
},
|
|
//get hash of properties for single record
|
|
getDetails:function(data){
|
|
return webix.DataDriver.xml.tagToObject(data);
|
|
},
|
|
getOptions:function(){
|
|
return false;
|
|
},
|
|
//dyn loading is not supported by HTML data source
|
|
getInfo:function(data){
|
|
return {
|
|
_size:0,
|
|
_from:0
|
|
};
|
|
},
|
|
tag: "LI"
|
|
};
|
|
|
|
webix.DataDriver.jsarray={
|
|
//parse jsarray string to jsarray object if necessary
|
|
toObject:function(data){
|
|
if (typeof data == "string")
|
|
return JSON.parse(data);
|
|
return data;
|
|
},
|
|
//get array of records
|
|
getRecords:function(data){
|
|
if (data && data.data)
|
|
data = data.data;
|
|
return data;
|
|
},
|
|
//get hash of properties for single record, in case of array they will have names as "data{index}"
|
|
getDetails:function(data){
|
|
var result = {};
|
|
for (var i=0; i < data.length; i++)
|
|
result["data"+i]=data[i];
|
|
if (this.idColumn !== null)
|
|
result.id = data[this.idColumn];
|
|
|
|
return result;
|
|
},
|
|
getOptions:function(){ return false; },
|
|
//dyn loading is not supported by js-array data source
|
|
getInfo:function(data){
|
|
return {
|
|
_size:0,
|
|
_from:0
|
|
};
|
|
},
|
|
idColumn:null
|
|
};
|
|
|
|
webix.DataDriver.csv={
|
|
//incoming data always a string
|
|
toObject:function(data){
|
|
return data;
|
|
},
|
|
//get array of records
|
|
getRecords:function(data){
|
|
return data.split(this.row);
|
|
},
|
|
//get hash of properties for single record, data named as "data{index}"
|
|
getDetails:function(data){
|
|
data = this.stringToArray(data);
|
|
var result = {};
|
|
for (var i=0; i < data.length; i++)
|
|
result["data"+i]=data[i];
|
|
|
|
if (this.idColumn !== null)
|
|
result.id = data[this.idColumn];
|
|
|
|
return result;
|
|
},
|
|
getOptions:function(){ return false; },
|
|
//dyn loading is not supported by csv data source
|
|
getInfo:function(data){
|
|
return {
|
|
_size:0,
|
|
_from:0
|
|
};
|
|
},
|
|
//split string in array, takes string surrounding quotes in account
|
|
stringToArray:function(data){
|
|
data = data.split(this.cell);
|
|
for (var i=0; i < data.length; i++)
|
|
data[i] = data[i].replace(/^[ \t\n\r]*(\"|)/g,"").replace(/(\"|)[ \t\n\r]*$/g,"");
|
|
return data;
|
|
},
|
|
idColumn:null,
|
|
row:"\n", //default row separator
|
|
cell:"," //default cell separator
|
|
};
|
|
|
|
webix.DataDriver.xml={
|
|
_isValidXML:function(data){
|
|
if (!data || !data.documentElement)
|
|
return null;
|
|
if (data.getElementsByTagName("parsererror").length)
|
|
return null;
|
|
return data;
|
|
},
|
|
//convert xml string to xml object if necessary
|
|
toObject:function(text, response){
|
|
var data = response ? (response.rawxml ? response.rawxml() : response) :null;
|
|
if (this._isValidXML(data))
|
|
return data;
|
|
if (typeof text == "string")
|
|
data = this.fromString(text.replace(/^[\s]+/,""));
|
|
else
|
|
data = text;
|
|
|
|
if (this._isValidXML(data))
|
|
return data;
|
|
return null;
|
|
},
|
|
//get array of records
|
|
getRecords:function(data){
|
|
return this.xpath(data,this.records);
|
|
},
|
|
records:"/*/item",
|
|
child:"item",
|
|
config:"/*/config",
|
|
//get hash of properties for single record
|
|
getDetails:function(data){
|
|
return this.tagToObject(data,{});
|
|
},
|
|
getOptions:function(){
|
|
return false;
|
|
},
|
|
//get count of data and position at which new data_loading need to be inserted
|
|
getInfo:function(data){
|
|
|
|
var config = this.xpath(data, this.config);
|
|
if (config.length)
|
|
config = this.assignTypes(this.tagToObject(config[0],{}));
|
|
else
|
|
config = null;
|
|
|
|
return {
|
|
_size:(data.documentElement.getAttribute("total_count")||0),
|
|
_from:(data.documentElement.getAttribute("pos")||0),
|
|
_parent:(data.documentElement.getAttribute("parent")||0),
|
|
_config:config,
|
|
_key:(data.documentElement.getAttribute("webix_security")||null)
|
|
};
|
|
},
|
|
//xpath helper
|
|
xpath:function(xml,path){
|
|
if (window.XPathResult){ //FF, KHTML, Opera
|
|
var node=xml;
|
|
if(xml.nodeName.indexOf("document")==-1)
|
|
xml=xml.ownerDocument;
|
|
var res = [];
|
|
var col = xml.evaluate(path, node, null, XPathResult.ANY_TYPE, null);
|
|
var temp = col.iterateNext();
|
|
while (temp){
|
|
res.push(temp);
|
|
temp = col.iterateNext();
|
|
}
|
|
return res;
|
|
}
|
|
else {
|
|
var test = true;
|
|
try {
|
|
if (typeof(xml.selectNodes)=="undefined")
|
|
test = false;
|
|
} catch(e){ /*IE7 and below can't operate with xml object*/ }
|
|
//IE
|
|
if (test)
|
|
return xml.selectNodes(path);
|
|
else {
|
|
//there is no interface to do XPath
|
|
//use naive approach
|
|
var name = path.split("/").pop();
|
|
|
|
return xml.getElementsByTagName(name);
|
|
}
|
|
}
|
|
},
|
|
assignTypes:function(obj){
|
|
for (var k in obj){
|
|
var test = obj[k];
|
|
if (typeof test == "object")
|
|
this.assignTypes(test);
|
|
else if (typeof test == "string"){
|
|
if (test === "")
|
|
continue;
|
|
if (test == "true")
|
|
obj[k] = true;
|
|
else if (test == "false")
|
|
obj[k] = false;
|
|
else if (test == test*1)
|
|
obj[k] = obj[k]*1;
|
|
}
|
|
}
|
|
return obj;
|
|
},
|
|
//convert xml tag to js object, all subtags and attributes are mapped to the properties of result object
|
|
tagToObject:function(tag,z){
|
|
var isArray = tag.nodeType == 1 && tag.getAttribute("stack");
|
|
var hasSubTags = 0;
|
|
|
|
if (!isArray){
|
|
z=z||{};
|
|
|
|
|
|
//map attributes
|
|
var a=tag.attributes;
|
|
if(a && a.length)
|
|
for (var i=0; i<a.length; i++){
|
|
z[a[i].name]=a[i].value;
|
|
hasSubTags = 1;
|
|
}
|
|
|
|
//map subtags
|
|
var b=tag.childNodes;
|
|
for (var i=0; i<b.length; i++)
|
|
if (b[i].nodeType==1){
|
|
var name = b[i].tagName;
|
|
if (z[name]){
|
|
if (typeof z[name].push != "function")
|
|
z[name] = [z[name]];
|
|
z[name].push(this.tagToObject(b[i],{}));
|
|
} else
|
|
z[name]=this.tagToObject(b[i],{}); //sub-object for complex subtags
|
|
hasSubTags = 2;
|
|
}
|
|
|
|
if (!hasSubTags)
|
|
return this.nodeValue(tag);
|
|
//each object will have its text content as "value" property
|
|
//only if has not sub tags
|
|
if (hasSubTags < 2)
|
|
z.value = z.value||this.nodeValue(tag);
|
|
|
|
} else {
|
|
z = [];
|
|
var b=tag.childNodes;
|
|
for (var i=0; i<b.length; i++)
|
|
if (b[i].nodeType==1)
|
|
z.push(this.tagToObject(b[i],{}));
|
|
}
|
|
|
|
return z;
|
|
},
|
|
//get value of xml node
|
|
nodeValue:function(node){
|
|
if (node.firstChild){
|
|
return node.firstChild.wholeText || node.firstChild.data;
|
|
}
|
|
return "";
|
|
},
|
|
//convert XML string to XML object
|
|
fromString:function(xmlString){
|
|
try{
|
|
if (window.DOMParser) // FF, KHTML, Opera
|
|
return (new DOMParser()).parseFromString(xmlString,"text/xml");
|
|
if (window.ActiveXObject){ // IE, utf-8 only
|
|
var temp=new ActiveXObject("Microsoft.xmlDOM");
|
|
temp.loadXML(xmlString);
|
|
return temp;
|
|
}
|
|
} catch(e){
|
|
webix.assert_error(e);
|
|
return null;
|
|
}
|
|
webix.assert_error("Load from xml string is not supported");
|
|
}
|
|
};
|
|
|
|
|
|
webix.debug_code(function(){
|
|
webix.debug_load_event = webix.attachEvent("onLoadError", function(text, xml, xhttp, owner){
|
|
text = text || "[EMPTY DATA]";
|
|
var error_text = "Data loading error, check console for details";
|
|
if (text.indexOf("<?php") === 0)
|
|
error_text = "PHP support missed";
|
|
else if (text.indexOf("WEBIX_ERROR:") === 0)
|
|
error_text = text.replace("WEBIX_ERROR:","");
|
|
|
|
if (webix.message)
|
|
webix.message({
|
|
type:"debug",
|
|
text:error_text,
|
|
expire:-1
|
|
});
|
|
if (window.console){
|
|
var logger = window.console;
|
|
logger.log("Data loading error");
|
|
logger.log("Object:", owner);
|
|
logger.log("Response:", text);
|
|
logger.log("XHTTP:", xhttp);
|
|
}
|
|
});
|
|
|
|
webix.ready(function(){
|
|
var path = document.location.href;
|
|
return; // ignore warning
|
|
if (path.indexOf("file:")===0){
|
|
if (webix.message)
|
|
webix.message({
|
|
type:"error",
|
|
text:"Please open sample by http,<br>not as file://",
|
|
expire:-1
|
|
});
|
|
else
|
|
window.alert("Please open sample by http, not as file://");
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
//UI interface
|
|
webix.BaseBind = {
|
|
bind:function(target, rule, format){
|
|
if (!this.attachEvent)
|
|
webix.extend(this, webix.EventSystem);
|
|
|
|
if (typeof target == 'string')
|
|
target = webix.$$(target);
|
|
|
|
if (target._initBindSource) target._initBindSource();
|
|
if (this._initBindSource) this._initBindSource();
|
|
|
|
|
|
|
|
if (!target.getBindData)
|
|
webix.extend(target, webix.BindSource);
|
|
|
|
this._bind_ready();
|
|
|
|
target.addBind(this._settings.id, rule, format);
|
|
this._bind_source = target._settings.id;
|
|
|
|
if (webix.debug_bind)
|
|
webix.log("[bind] "+this.name+"@"+this._settings.id+" <= "+target.name+"@"+target._settings.id);
|
|
|
|
var target_id = this._settings.id;
|
|
//FIXME - check for touchable is not the best solution, to detect necessary event
|
|
this._bind_refresh_handler = this.attachEvent(this.touchable?"onAfterRender":"onBindRequest", function(){
|
|
return target.getBindData(target_id);
|
|
});
|
|
|
|
if (this.refresh && this.isVisible(this._settings.id))
|
|
this.refresh();
|
|
},
|
|
unbind:function(){
|
|
if (this._bind_source){
|
|
var target = webix.$$(this._bind_source);
|
|
if (target)
|
|
target.removeBind(this._settings.id);
|
|
this.detachEvent(this._bind_refresh_handler);
|
|
this._bind_source = null;
|
|
}
|
|
},
|
|
_bind_ready:function(){
|
|
var config = this._settings;
|
|
if (this.filter){
|
|
var key = config.id;
|
|
this.data._on_sync = webix.bind(function(){
|
|
webix.$$(this._bind_source)._bind_updated[key] = false;
|
|
}, this);
|
|
}
|
|
|
|
var old_render = this.render;
|
|
this.render = function(){
|
|
if (this._in_bind_processing) return;
|
|
|
|
this._in_bind_processing = true;
|
|
var result = this.callEvent("onBindRequest");
|
|
this._in_bind_processing = false;
|
|
|
|
return old_render.apply(this, ((result === false)?arguments:[]));
|
|
};
|
|
|
|
if (this.getValue||this.getValues)
|
|
this.save = function(){
|
|
if (this.validate && !this.validate()) return false;
|
|
webix.$$(this._bind_source).setBindData((this.getValue?this.getValue:this.getValues()),this._settings.id);
|
|
//reset form, so it will be counted as saved
|
|
if (this.setDirty)
|
|
this.setDirty(false);
|
|
};
|
|
|
|
//we want to refresh list after data loading if it has master link
|
|
//in same time we do not want such operation for dataFeed components
|
|
//as they are reloading data as response to the master link
|
|
if (!config.dataFeed && this.loadNext)
|
|
this.data.attachEvent("onStoreLoad", webix.bind(function(){
|
|
if (this._bind_source)
|
|
webix.$$(this._bind_source)._bind_updated[this._settings.id] = false;
|
|
}, this));
|
|
|
|
this._bind_ready = function(){};
|
|
}
|
|
};
|
|
|
|
//bind interface
|
|
webix.BindSource = {
|
|
$init:function(){
|
|
this._bind_hash = {}; //rules per target
|
|
this._bind_updated = {}; //update flags
|
|
this._ignore_binds = {};
|
|
|
|
//apply specific bind extension
|
|
this._bind_specific_rules(this);
|
|
},
|
|
saveBatch:function(code){
|
|
this._do_not_update_binds = true;
|
|
code.call(this);
|
|
this._do_not_update_binds = false;
|
|
this._update_binds();
|
|
},
|
|
setBindData:function(data, key){
|
|
//save called, updating master data
|
|
if (key)
|
|
this._ignore_binds[key] = true;
|
|
|
|
if (webix.debug_bind)
|
|
webix.log("[bind:save] "+this.name+"@"+this._settings.id+" <= "+"@"+key);
|
|
if (this.setValue)
|
|
this.setValue(data);
|
|
else if (this.setValues)
|
|
this.setValues(data);
|
|
else {
|
|
var id = this.getCursor();
|
|
if (id)
|
|
this.updateItem(id, data);
|
|
else
|
|
this.add(data);
|
|
}
|
|
this.callEvent("onBindUpdate", [data, key]);
|
|
if (this.save)
|
|
this.save();
|
|
|
|
if (key)
|
|
this._ignore_binds[key] = false;
|
|
},
|
|
//fill target with data
|
|
getBindData:function(key, update){
|
|
//fire only if we have data updates from the last time
|
|
if (this._bind_updated[key]) return false;
|
|
var target = webix.$$(key);
|
|
//fill target only when it visible
|
|
if (target.isVisible(target._settings.id)){
|
|
this._bind_updated[key] = true;
|
|
if (webix.debug_bind)
|
|
webix.log("[bind:request] "+this.name+"@"+this._settings.id+" => "+target.name+"@"+target._settings.id);
|
|
this._bind_update(target, this._bind_hash[key][0], this._bind_hash[key][1]); //trigger component specific updating logic
|
|
if (update && target.filter)
|
|
target.refresh();
|
|
}
|
|
},
|
|
//add one more bind target
|
|
addBind:function(source, rule, format){
|
|
this._bind_hash[source] = [rule, format];
|
|
},
|
|
removeBind:function(source){
|
|
delete this._bind_hash[source];
|
|
delete this._bind_updated[source];
|
|
delete this._ignore_binds[source];
|
|
},
|
|
//returns true if object belong to "collection" type
|
|
_bind_specific_rules:function(obj){
|
|
if (obj.filter)
|
|
webix.extend(this, webix.CollectionBind);
|
|
else if (obj.setValue)
|
|
webix.extend(this, webix.ValueBind);
|
|
else
|
|
webix.extend(this, webix.RecordBind);
|
|
},
|
|
//inform all binded objects, that source data was updated
|
|
_update_binds:function(){
|
|
if (!this._do_not_update_binds)
|
|
for (var key in this._bind_hash){
|
|
if (this._ignore_binds[key]) continue;
|
|
this._bind_updated[key] = false;
|
|
this.getBindData(key, true);
|
|
}
|
|
},
|
|
//copy data from source to the target
|
|
_bind_update_common:function(target, rule, data){
|
|
if (target.setValue)
|
|
target.setValue((data&&rule)?data[rule]:data);
|
|
else if (!target.filter){
|
|
if (!data && target.clear)
|
|
target.clear();
|
|
else {
|
|
if (target._check_data_feed(data))
|
|
target.setValues(webix.clone(data));
|
|
}
|
|
} else {
|
|
target.data.silent(function(){
|
|
this.filter(rule,data);
|
|
});
|
|
}
|
|
target.callEvent("onBindApply", [data,rule,this]);
|
|
}
|
|
};
|
|
|
|
|
|
//pure data objects
|
|
webix.DataValue = webix.proto({
|
|
name:"DataValue",
|
|
isVisible:function(){ return true; },
|
|
$init:function(config){
|
|
if (!config || webix.isUndefined(config.value))
|
|
this.data = config||"";
|
|
|
|
var id = (config&&config.id)?config.id:webix.uid();
|
|
this._settings = { id:id };
|
|
webix.ui.views[id] = this;
|
|
},
|
|
setValue:function(value){
|
|
this.data = value;
|
|
this.callEvent("onChange", [value]);
|
|
},
|
|
getValue:function(){
|
|
return this.data;
|
|
},
|
|
refresh:function(){ this.callEvent("onBindRequest"); }
|
|
}, webix.EventSystem, webix.BaseBind);
|
|
|
|
webix.DataRecord = webix.proto({
|
|
name:"DataRecord",
|
|
isVisible:function(){ return true; },
|
|
$init:function(config){
|
|
this.data = config||{};
|
|
var id = (config&&config.id)?config.id:webix.uid();
|
|
this._settings = { id:id };
|
|
webix.ui.views[id] = this;
|
|
},
|
|
getValues:function(){
|
|
return this.data;
|
|
},
|
|
setValues:function(data, update){
|
|
this.data = update?webix.extend(this.data, data, true):data;
|
|
this.callEvent("onChange", [data]);
|
|
},
|
|
refresh:function(){ this.callEvent("onBindRequest"); }
|
|
}, webix.EventSystem, webix.BaseBind, webix.AtomDataLoader, webix.Settings);
|
|
|
|
|
|
webix.ValueBind={
|
|
$init:function(){
|
|
this.attachEvent("onChange", this._update_binds);
|
|
},
|
|
_bind_update:function(target, rule, format){
|
|
rule = rule || "value";
|
|
var data = this.getValue()||"";
|
|
if (format) data = format(data);
|
|
|
|
if (target.setValue)
|
|
target.setValue(data);
|
|
else if (!target.filter){
|
|
var pod = {}; pod[rule] = data;
|
|
if (target._check_data_feed(data))
|
|
target.setValues(pod);
|
|
} else{
|
|
target.data.silent(function(){
|
|
this.filter(rule,data);
|
|
});
|
|
}
|
|
target.callEvent("onBindApply", [data,rule,this]);
|
|
}
|
|
};
|
|
|
|
webix.RecordBind={
|
|
$init:function(){
|
|
this.attachEvent("onChange", this._update_binds);
|
|
},
|
|
_bind_update:function(target, rule, format){
|
|
var data = this.getValues()||null;
|
|
if (format)
|
|
data = format(data);
|
|
this._bind_update_common(target, rule, data);
|
|
}
|
|
};
|
|
|
|
webix.CollectionBind={
|
|
$init:function(){
|
|
this._cursor = null;
|
|
this.attachEvent("onSelectChange", function(data){
|
|
var sel = this.getSelectedId();
|
|
this.setCursor(sel?(sel.id||sel):null);
|
|
});
|
|
this.attachEvent("onAfterCursorChange", this._update_binds);
|
|
this.attachEvent("onAfterDelete", function(id){
|
|
if (id == this.getCursor())
|
|
this.setCursor(null);
|
|
});
|
|
this.data.attachEvent("onStoreUpdated", webix.bind(function(id, data, mode){
|
|
//paint - ignored
|
|
//delete - handled by onAfterDelete above
|
|
if (id && id == this.getCursor() && mode != "paint" && mode != "delete")
|
|
this._update_binds();
|
|
|
|
},this));
|
|
this.data.attachEvent("onClearAll", webix.bind(function(){
|
|
this._cursor = null;
|
|
},this));
|
|
this.data.attachEvent("onIdChange", webix.bind(function(oldid, newid){
|
|
if (this._cursor == oldid){
|
|
this._cursor = newid;
|
|
this._update_binds();
|
|
}
|
|
},this));
|
|
},
|
|
refreshCursor:function(){
|
|
if (this._cursor)
|
|
this.callEvent("onAfterCursorChange",[this._cursor]);
|
|
},
|
|
setCursor:function(id){
|
|
if (id == this._cursor || (id !== null && !this.getItem(id))) return;
|
|
|
|
this.callEvent("onBeforeCursorChange", [this._cursor]);
|
|
this._cursor = id;
|
|
this.callEvent("onAfterCursorChange",[id]);
|
|
},
|
|
getCursor:function(){
|
|
return this._cursor;
|
|
},
|
|
_bind_update:function(target, rule, format){
|
|
if (rule == "$level" && this.data.getBranch)
|
|
return (target.data || target).importData(this.data.getBranch(this.getCursor()));
|
|
|
|
var data = this.getItem(this.getCursor())|| this._settings.defaultData || null;
|
|
if (rule == "$data"){
|
|
if (typeof format === "function")
|
|
return format.call(target, data, this);
|
|
else
|
|
return target.data.importData(data?data[format]:[]);
|
|
}
|
|
|
|
if (format)
|
|
data = format(data);
|
|
this._bind_update_common(target, rule, data);
|
|
}
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
REnders single item.
|
|
Can be used for elements without datastore, or with complex custom rendering logic
|
|
|
|
@export
|
|
render
|
|
*/
|
|
|
|
|
|
|
|
webix.AtomRender={
|
|
//convert item to the HTML text
|
|
_toHTML:function(obj){
|
|
if (obj.$empty )
|
|
return "";
|
|
return this._settings.template(obj, this);
|
|
},
|
|
//render self, by templating data object
|
|
render:function(){
|
|
var cfg = this._settings;
|
|
if (this.isVisible(cfg.id)){
|
|
if (webix.debug_render)
|
|
webix.log("Render: "+this.name+"@"+cfg.id);
|
|
if (!this.callEvent || this.callEvent("onBeforeRender",[this.data])){
|
|
if (this.data && !cfg.content){
|
|
//it is critical to have this as two commands
|
|
//its prevent destruction race in Chrome
|
|
this._dataobj.innerHTML = "";
|
|
this._dataobj.innerHTML = this._toHTML(this.data);
|
|
}
|
|
if (this.callEvent) this.callEvent("onAfterRender",[]);
|
|
}
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
sync:function(source){
|
|
this._backbone_sync = false;
|
|
if (source.name != "DataStore"){
|
|
if (source.data && source.name == "DataStore"){
|
|
source = source.data;
|
|
} else {
|
|
this._backbone_sync = true;
|
|
}
|
|
}
|
|
|
|
|
|
if (this._backbone_sync)
|
|
source.bind("change", webix.bind(function(data){
|
|
if (data.id == this.data.id){
|
|
this.data = data.attributes;
|
|
this.refresh();
|
|
}
|
|
}, this));
|
|
else
|
|
source.attachEvent("onStoreUpdated", webix.bind(function(id){
|
|
if (!id || id == this.data.id){
|
|
this.data = source.pull[id];
|
|
this.refresh();
|
|
}
|
|
}, this));
|
|
},
|
|
template_setter:webix.template
|
|
};
|
|
|
|
webix.SingleRender=webix.proto({
|
|
template_setter:function(value){
|
|
this.type.template=webix.template(value);
|
|
},
|
|
//convert item to the HTML text
|
|
_toHTML:function(obj){
|
|
var type = this.type;
|
|
return (type.templateStart?type.templateStart(obj,type):"") + type.template(obj,type) + (type.templateEnd?type.templateEnd(obj,type):"");
|
|
},
|
|
customize:function(obj){
|
|
webix.type(this,obj);
|
|
}
|
|
}, webix.AtomRender);
|
|
|
|
webix.UIManager = {
|
|
_view: null,
|
|
_hotkeys: {},
|
|
_focus_time:0,
|
|
_controls: {
|
|
'enter': 13,
|
|
'tab': 9,
|
|
'esc': 27,
|
|
'escape': 27,
|
|
'up': 38,
|
|
'down': 40,
|
|
'left': 37,
|
|
'right': 39,
|
|
'pgdown': 34,
|
|
'pagedown': 34,
|
|
'pgup': 33,
|
|
'pageup': 33,
|
|
'end': 35,
|
|
'home': 36,
|
|
'insert': 45,
|
|
'delete': 46,
|
|
'backspace': 8,
|
|
'space': 32,
|
|
'meta': 91,
|
|
'win': 91,
|
|
'mac': 91,
|
|
'multiply': 106,
|
|
'add': 107,
|
|
'subtract': 109,
|
|
'decimal': 110,
|
|
'divide': 111
|
|
},
|
|
_enable: function() {
|
|
// attaching events here
|
|
webix.event(document.body, "click", webix.bind(this._focus_click, this));
|
|
webix.event(document, "keydown", webix.bind(this._keypress, this));
|
|
if (document.body.addEventListener)
|
|
document.body.addEventListener("focus", webix.bind(this._focus_tab, this), true);
|
|
|
|
webix.destructors.push(this);
|
|
},
|
|
destructor:function(){
|
|
webix.UIManager._view = null;
|
|
},
|
|
getFocus: function() {
|
|
return this._view;
|
|
},
|
|
_focus_action:function(view){
|
|
this._focus_was_there = this._focus_was_there || view._settings.id;
|
|
},
|
|
setFocus: function(view, only_api){
|
|
//view can be empty
|
|
view = webix.$$(view);
|
|
//unfocus if view is hidden
|
|
if (view && !view.$view) view = null;
|
|
this._focus_time = webix._focus_time = new Date();
|
|
|
|
if (this._view === view) return true;
|
|
if (this._view && this._view.callEvent)
|
|
this._view.callEvent("onBlur", [this._view]);
|
|
|
|
if (view && view.callEvent)
|
|
view.callEvent("onFocus", [view, this._view]);
|
|
webix.callEvent("onFocusChange", [view, this._view]);
|
|
|
|
if (this._view && this._view.blur && !only_api) this._view.blur();
|
|
this._view = view;
|
|
if (view && view.focus && !only_api) view.focus();
|
|
return true;
|
|
},
|
|
applyChanges: function(element){
|
|
var view = this.getFocus();
|
|
if (view && view != element && view._applyChanges)
|
|
view._applyChanges(element);
|
|
},
|
|
hasFocus: function(view) {
|
|
return (view === this._view) ? true : false;
|
|
},
|
|
_focus: function(e, dont_clear) {
|
|
var view = webix.html.locate(e, "view_id") || this._focus_was_there;
|
|
|
|
//if html was repainted we can miss the view, so checking last processed one
|
|
view = webix.$$(view);
|
|
this._focus_was_there = null;
|
|
|
|
if (view == this._view) return;
|
|
|
|
if (!dont_clear)
|
|
this._focus_was_there = null;
|
|
|
|
if (view){
|
|
view = webix.$$(view);
|
|
if (this.canFocus(view))
|
|
this.setFocus(view);
|
|
} else if (!dont_clear)
|
|
this.setFocus(null);
|
|
|
|
return true;
|
|
},
|
|
_focus_click:function(e){
|
|
// if it was onfocus/onclick less then 100ms behore then we ignore it
|
|
if ((new Date())-this._focus_time < 100) {
|
|
this._focus_was_there = null;
|
|
return false;
|
|
}
|
|
return this._focus(e);
|
|
},
|
|
_focus_tab: function(e) {
|
|
return this._focus(e, true);
|
|
},
|
|
canFocus:function(view){
|
|
return view.isVisible() && view.isEnabled();
|
|
},
|
|
|
|
_moveChildFocus: function(check_view){
|
|
var focus = this.getFocus();
|
|
//we have not focus inside of closing item
|
|
if (check_view && !this._is_child_of(check_view, focus))
|
|
return false;
|
|
|
|
if (!this._focus_logic("getPrev", check_view))
|
|
this.setFocus(this.getPrev(check_view));
|
|
else
|
|
this._view = null;
|
|
},
|
|
_translation_table:{
|
|
|
|
190:46
|
|
},
|
|
_is_child_of: function(parent, child) {
|
|
if (!parent) return false;
|
|
if (!child) return false;
|
|
while (child) {
|
|
if (child === parent) return true;
|
|
child = child.getParentView();
|
|
}
|
|
return false;
|
|
},
|
|
_keypress_timed:function(){
|
|
if (this && this.callEvent)
|
|
this.callEvent("onTimedKeyPress",[]);
|
|
},
|
|
_isNumPad: function(code){
|
|
return code < 112 && code>105;
|
|
},
|
|
_keypress: function(e) {
|
|
var code = e.which || e.keyCode;
|
|
if(code>95 && code< 106)
|
|
code -= 48; //numpad support (numbers)
|
|
code = this._translation_table[code] || code;
|
|
|
|
var ctrl = e.ctrlKey;
|
|
var shift = e.shiftKey;
|
|
var alt = e.altKey;
|
|
var meta = e.metaKey;
|
|
var codeid = this._keycode(code, ctrl, shift, alt, meta);
|
|
var view = this.getFocus();
|
|
if (view && view.callEvent) {
|
|
if (view.callEvent("onKeyPress", [code,e]) === false)
|
|
webix.html.preventEvent(e);
|
|
if (view.hasEvent("onTimedKeyPress")){
|
|
clearTimeout(view._key_press_timeout);
|
|
view._key_press_timeout = webix.delay(this._keypress_timed, view, [], (view._settings.keyPressTimeout||250));
|
|
}
|
|
}
|
|
|
|
if (this.tabControl){
|
|
// tab pressed
|
|
if (code === 9 && !ctrl && !alt && !meta) {
|
|
this._focus_logic(!shift ? "getNext" : "getPrev");
|
|
webix.html.preventEvent(e);
|
|
}
|
|
}
|
|
if(!this._isNumPad(code))
|
|
codeid = this._keycode(String.fromCharCode(code), ctrl, shift, alt, meta);
|
|
//flag, that some non-special key was pressed
|
|
var is_any = !ctrl && !alt && !meta && (code!=9)&&(code!=27)&&(code!=13);
|
|
|
|
if (this._check_keycode(codeid, is_any, e) === false) {
|
|
webix.html.preventEvent(e);
|
|
return false;
|
|
}
|
|
},
|
|
|
|
// dir - getNext or getPrev
|
|
_focus_logic: function(dir) {
|
|
if (!this.getFocus()) return null;
|
|
|
|
dir = dir || "getNext";
|
|
var next = this.getFocus();
|
|
var start = next;
|
|
var marker = webix.uid();
|
|
|
|
while (true) {
|
|
next = this[dir](next);
|
|
// view with focus ability
|
|
if (next && next._settings.tabFocus && this.canFocus(next))
|
|
return this.setFocus(next);
|
|
|
|
// elements with focus ability not found
|
|
if (next === start || next.$fmarker == marker)
|
|
return null;
|
|
|
|
//prevents infinity loop
|
|
next.$fmarker = marker;
|
|
}
|
|
},
|
|
|
|
getTop: function(id) {
|
|
var next, view = webix.$$(id);
|
|
|
|
while (view && (next = view.getParentView()))
|
|
view = next;
|
|
return view;
|
|
},
|
|
|
|
getNext: function(view, _inner_call) {
|
|
var cells = view.getChildViews();
|
|
//tab to first children
|
|
if (cells.length && !_inner_call) return cells[0];
|
|
|
|
//unique case - single view without child and parent
|
|
var parent = view.getParentView();
|
|
if (!parent)
|
|
return view;
|
|
|
|
var p_cells = parent.getChildViews();
|
|
if (p_cells.length){
|
|
var index = webix.PowerArray.find.call(p_cells, view)+1;
|
|
while (index < p_cells.length) {
|
|
//next visible child
|
|
if (this.canFocus(p_cells[index]))
|
|
return p_cells[index];
|
|
|
|
index++;
|
|
}
|
|
}
|
|
|
|
//sibling of parent
|
|
return this.getNext(parent, true);
|
|
},
|
|
|
|
getPrev: function(view, _inner_call) {
|
|
var cells = view.getChildViews();
|
|
//last child of last child
|
|
if (cells.length && _inner_call)
|
|
return this.getPrev(cells[cells.length - 1], true);
|
|
if (_inner_call) return view;
|
|
|
|
//fallback from top to bottom
|
|
var parent = view.getParentView();
|
|
if (!parent) return this.getPrev(view, true);
|
|
|
|
|
|
var p_cells = parent.getChildViews();
|
|
if (p_cells) {
|
|
var index = webix.PowerArray.find.call(p_cells, view)-1;
|
|
while (index >= 0) {
|
|
if (this.canFocus(p_cells[index]))
|
|
return this.getPrev(p_cells[index], true);
|
|
index--;
|
|
}
|
|
}
|
|
|
|
return parent;
|
|
},
|
|
|
|
addHotKey: function(keys, handler, view) {
|
|
webix.assert(handler, "Hot key handler is not defined");
|
|
var pack = this._parse_keys(keys);
|
|
webix.assert(pack.letter, "Unknown key code");
|
|
if (!view) view = null;
|
|
pack.handler = handler;
|
|
pack.view = view;
|
|
|
|
|
|
var code = this._keycode(pack.letter, pack.ctrl, pack.shift, pack.alt, pack.meta);
|
|
if (!this._hotkeys[code]) this._hotkeys[code] = [];
|
|
this._hotkeys[code].push(pack);
|
|
|
|
return keys;
|
|
},
|
|
removeHotKey: function(keys, func, view){
|
|
var pack = this._parse_keys(keys);
|
|
var code = this._keycode(pack.letter, pack.ctrl, pack.shift, pack.alt, pack.meta);
|
|
if (!func && !view)
|
|
delete this._hotkeys[code];
|
|
else {
|
|
var t = this._hotkeys[code];
|
|
if (t){
|
|
for (var i = t.length - 1; i >= 0; i--) {
|
|
if (view && t[i].view !== view) continue;
|
|
if (func && t[i].handler !== func) continue;
|
|
t.splice(i,1);
|
|
}
|
|
if (!t.length)
|
|
delete this._hotkeys[code];
|
|
}
|
|
|
|
}
|
|
},
|
|
_keycode: function(code, ctrl, shift, alt, meta) {
|
|
return code+"_"+["", (ctrl ? '1' : '0'), (shift ? '1' : '0'), (alt ? '1' : '0'), (meta ? '1' : '0')].join('');
|
|
},
|
|
|
|
_check_keycode: function(code, is_any, e){
|
|
var focus = this.getFocus();
|
|
if (this._hotkeys[code])
|
|
return this._process_calls(this._hotkeys[code], focus, e);
|
|
else if (is_any && this._hotkeys["ANY_0000"])
|
|
return this._process_calls(this._hotkeys["ANY_0000"], focus, e);
|
|
|
|
return true;
|
|
},
|
|
_process_calls:function(calls, focus, e){
|
|
for (var i = 0; i < calls.length; i++) {
|
|
var key = calls[i];
|
|
var call = false;
|
|
if ((key.view !== null) && //common hot-key
|
|
(focus !== key.view) && //hot-key for current view
|
|
//hotkey for current type of view
|
|
(typeof(key.view) !== 'string' || !focus || focus.name !== key.view)) continue;
|
|
|
|
var temp_result = key.handler(focus, e);
|
|
if (!!temp_result === temp_result) return temp_result;
|
|
}
|
|
return true;
|
|
},
|
|
_parse_keys: function(keys) {
|
|
var controls = this._controls;
|
|
var parts = keys.toLowerCase().split(/[\+\-_]/);
|
|
var ctrl, shift, alt, meta;
|
|
ctrl = shift = alt = meta = 0;
|
|
var letter = "";
|
|
for (var i = 0; i < parts.length; i++) {
|
|
if (parts[i] === 'ctrl') ctrl = 1;
|
|
else if (parts[i] === 'shift') shift = 1;
|
|
else if (parts[i] === 'alt') alt = 1;
|
|
else if (parts[i] === 'command') meta = 1;
|
|
else {
|
|
if (controls[parts[i]]) {
|
|
var code = controls[parts[i]];
|
|
if(this._isNumPad(code))
|
|
letter = code.toString();
|
|
else
|
|
letter = String.fromCharCode(code);
|
|
} else {
|
|
letter = parts[i];
|
|
}
|
|
}
|
|
}
|
|
return {
|
|
letter: letter.toUpperCase(),
|
|
ctrl: ctrl,
|
|
shift: shift,
|
|
alt: alt,
|
|
meta: meta,
|
|
debug:keys
|
|
};
|
|
}
|
|
};
|
|
|
|
webix.ready(function() {
|
|
webix.UIManager._enable();
|
|
|
|
webix.UIManager.addHotKey("enter", function(view, ev){
|
|
if (view && view.editStop && view._in_edit_mode){
|
|
view.editStop();
|
|
return true;
|
|
} else if (view && view.touchable){
|
|
var form = view.getFormView();
|
|
if (form && !view._skipSubmit)
|
|
form.callEvent("onSubmit",[view,ev]);
|
|
}
|
|
});
|
|
webix.UIManager.addHotKey("esc", function(view){
|
|
if (view){
|
|
if (view.editCancel && view._in_edit_mode){
|
|
view.editCancel();
|
|
return true;
|
|
}
|
|
var top = view.getTopParentView();
|
|
if (top && top.setPosition)
|
|
top._hide();
|
|
}
|
|
});
|
|
webix.UIManager.addHotKey("shift+tab", function(view, e){
|
|
if (view && view._custom_tab_handler && !view._custom_tab_handler(false, e))
|
|
return false;
|
|
|
|
if (view && view._in_edit_mode){
|
|
if (view.editNext)
|
|
return view.editNext(false);
|
|
else if (view.editStop){
|
|
view.editStop();
|
|
return true;
|
|
}
|
|
}
|
|
|
|
});
|
|
webix.UIManager.addHotKey("tab", function(view, e){
|
|
if (view && view._custom_tab_handler && !view._custom_tab_handler(true, e))
|
|
return false;
|
|
|
|
if (view && view._in_edit_mode){
|
|
if (view.editNext)
|
|
return view.editNext(true);
|
|
else if (view.editStop){
|
|
view.editStop();
|
|
return true;
|
|
}
|
|
} else
|
|
webix.delay(function(){
|
|
if(!webix.UIManager.tabControl)
|
|
webix.UIManager.setFocus(webix.$$(document.activeElement), true);
|
|
},1);
|
|
});
|
|
});
|
|
|
|
webix.IdSpace = {
|
|
$init:function(){
|
|
this._elements = {};
|
|
this._translate_ids = {};
|
|
this.getTopParentView = webix.bind(function(){ return this;}, this);
|
|
|
|
this._run_inner_init_logic();
|
|
this.$ready.push(this._run_after_inner_init_logic);
|
|
},
|
|
$$:function(id){
|
|
return this._elements[id];
|
|
},
|
|
innerId:function(id){
|
|
return this._translate_ids[id];
|
|
},
|
|
_run_inner_init_logic:function(callback){
|
|
this._prev_global_col = webix._global_collection;
|
|
webix._global_collection = this;
|
|
},
|
|
_run_after_inner_init_logic:function(temp){
|
|
for (var name in this._elements){
|
|
var input = this._elements[name];
|
|
if (this.callEvent && input.mapEvent && !input._evs_map.onitemclick)
|
|
input.mapEvent({
|
|
onitemclick:this
|
|
});
|
|
input.getTopParentView = this.getTopParentView;
|
|
}
|
|
|
|
webix._global_collection = this._prev_global_col;
|
|
this._prev_global_col = 0;
|
|
},
|
|
_destroy_child:function(id){
|
|
delete this._elements[id];
|
|
},
|
|
ui:function(){
|
|
this._run_inner_init_logic();
|
|
var temp = webix.ui.apply(webix, arguments);
|
|
this._run_after_inner_init_logic();
|
|
return temp;
|
|
}
|
|
};
|
|
|
|
|
|
(function(){
|
|
|
|
var resize = [];
|
|
var ui = webix.ui;
|
|
|
|
if (!webix.ui){
|
|
ui = webix.ui = function(config, parent, id){
|
|
webix._ui_creation = true;
|
|
var multiset = webix.isArray(config);
|
|
var node = webix.toNode((config.container||parent)||document.body);
|
|
|
|
// solve problem with non-unique ids
|
|
if(node._settings)
|
|
id = _correctId(node, multiset, id);
|
|
|
|
var top_node;
|
|
var body_child = (node == document.body);
|
|
if (config._settings || (node && multiset)){
|
|
top_node = config;
|
|
} else {
|
|
if (node && body_child)
|
|
config.$topView = true;
|
|
if (!config._inner)
|
|
config._inner = {};
|
|
|
|
top_node = ui._view(config);
|
|
}
|
|
|
|
if (body_child && !top_node.setPosition && !top_node.$apiOnly)
|
|
webix.ui._fixHeight();
|
|
|
|
if (top_node._settings && top_node._settings._hidden && !node.$view){
|
|
top_node._settings._container = node;
|
|
} else if (!top_node.$apiOnly){
|
|
if (node.appendChild)
|
|
_appendDom(node, top_node, config);
|
|
else if (node.destructor){
|
|
var target = node;
|
|
|
|
//addView or view moving with target id
|
|
if (!id && id!==0 && !webix.isArray(top_node)){
|
|
id = node;
|
|
node = node.getParentView();
|
|
}
|
|
|
|
//if target supports view adding
|
|
if (node && node._replace){
|
|
//if source supports view removing
|
|
if (top_node.getParentView && top_node.getParentView())
|
|
top_node.getParentView()._remove(top_node);
|
|
|
|
node._replace(top_node, id);
|
|
} else {
|
|
var parent = target.$view.parentNode;
|
|
target.destructor();
|
|
_appendDom(parent, top_node, config);
|
|
}
|
|
} else
|
|
webix.assert_error("Not existing parent:"+config.container);
|
|
}
|
|
|
|
webix._ui_creation = false;
|
|
return top_node;
|
|
};
|
|
|
|
var _appendDom = function(node, top_node, config){
|
|
node.appendChild(top_node._viewobj);
|
|
//resize window with position center or top
|
|
//do not resize other windows and elements
|
|
// which are attached to custom html containers
|
|
if (((!top_node.setPosition || top_node._settings.fullscreen) && node == document.body) || top_node._settings.position )
|
|
resize.push(top_node);
|
|
if (!config.skipResize)
|
|
top_node.adjust();
|
|
};
|
|
|
|
var _correctId = function(target, multiset, id){
|
|
//replace view
|
|
var views = [target];
|
|
//replace content of layout
|
|
if (multiset)
|
|
views = target.getChildViews();
|
|
//replace content of window
|
|
else if (target._body_cell)
|
|
views = [target._body_cell];
|
|
//add cell in layout by number
|
|
else if (typeof id == "number"){
|
|
return id;
|
|
//replace cell in layout by id
|
|
} else if (id){
|
|
views = [webix.$$(id)];
|
|
_deleteIds(views);
|
|
return views[0].config.id;
|
|
}
|
|
|
|
_deleteIds(views);
|
|
return id;
|
|
};
|
|
|
|
var _deleteIds = function(views){
|
|
for (var i = views.length - 1; i >= 0; i--){
|
|
//remove original id
|
|
delete webix.ui.views[views[i].config.id];
|
|
//create temp id
|
|
views[i].config.id = "x"+webix.uid();
|
|
webix.ui.views[views[i].config.id] = views[i];
|
|
//process childs
|
|
_deleteIds(views[i].getChildViews());
|
|
}
|
|
};
|
|
}
|
|
|
|
webix.ui.animate = function(ui, parent, config){
|
|
var pobj = webix.$$(parent);
|
|
if (pobj){
|
|
var aniset = config || { type:"slide", direction:"left" };
|
|
var d = pobj._viewobj.cloneNode(true);
|
|
var view = webix.ui(ui, parent);
|
|
|
|
view._viewobj.parentNode.appendChild(d);
|
|
var line = webix.animate.formLine(
|
|
view._viewobj,
|
|
d,
|
|
aniset
|
|
);
|
|
|
|
aniset.callback = function(){
|
|
webix.animate.breakLine(line);
|
|
};
|
|
webix.animate(line, aniset);
|
|
|
|
return view;
|
|
}
|
|
};
|
|
|
|
webix.ui.animateView = function(view, stateHandler, config){
|
|
view = webix.$$(view);
|
|
if (view){
|
|
config = config || { type:"slide", direction:"left" };
|
|
|
|
var getHTML = function(view){
|
|
var el = view._viewobj;
|
|
var css = el.className;
|
|
var content =el.innerHTML;
|
|
return "<div class='"+css+"' style='width:"+el.offsetWidth+"px;height:"+el.offsetHeight+"px;'>"+content+"</div>";
|
|
};
|
|
|
|
// get 'display' state of child nodes
|
|
var display = [];
|
|
for(var i =0; i< view._viewobj.childNodes.length;i++){
|
|
var node = view._viewobj.childNodes[i];
|
|
var value = node.currentStyle ?node.currentStyle.display : getComputedStyle(node, null).display;
|
|
display.push(value||"");
|
|
}
|
|
// get current html content
|
|
var currentState = getHTML(view);
|
|
|
|
// apply new state
|
|
if(typeof stateHandler == "function"){
|
|
stateHandler.call(this);
|
|
}
|
|
|
|
// get new html content
|
|
var newState = getHTML(view);
|
|
|
|
// insert elements into the view
|
|
var tempParent = view._viewobj.insertBefore(webix.html.create("DIV",{
|
|
"class" : "webix_view_animate",
|
|
"style" : "width:"+view._viewobj.offsetWidth+"px;height:"+view._viewobj.offsetHeight+"px;"
|
|
}, newState+currentState),view._viewobj.firstChild);
|
|
|
|
// hide child nodes
|
|
for(var i =1; i< view._viewobj.childNodes.length;i++){
|
|
view._viewobj.childNodes[i].style.display = "none";
|
|
}
|
|
|
|
// animate inserted elements
|
|
var line = webix.animate.formLine(
|
|
tempParent.childNodes[0],
|
|
tempParent.childNodes[1],
|
|
config
|
|
);
|
|
config.callback = function(){
|
|
if(tempParent){
|
|
view._viewobj.removeChild(tempParent);
|
|
tempParent = null;
|
|
// restore 'display' state of child nodes
|
|
for(var i =0; i< view._viewobj.childNodes.length;i++){
|
|
view._viewobj.childNodes[i].style.display = display[i];
|
|
}
|
|
}
|
|
};
|
|
webix.animate(line, config);
|
|
|
|
return view;
|
|
}
|
|
};
|
|
|
|
/*called in baseview $init for calculate scrollSize*/
|
|
webix.ui._detectScrollSize = function(){
|
|
var div = webix.html.create("div");
|
|
div.className = "webix_skin_mark";
|
|
div.style.cssText="position:absolute;left:-1000px;width:100px;padding:0px;margin:0px;min-height:100px;overflow-y:scroll;";
|
|
|
|
document.body.appendChild(div);
|
|
var width = div.offsetWidth-div.clientWidth;
|
|
var skin = { 110:"air", 120:"aircompact", 130:"clouds", 140:"web", 150:"terrace", 160:"metro", 170:"light", 180:"glamour", 190:"touch", 200:"flat" , 210:"compact", 220:"material" }[Math.floor(div.offsetHeight/10)*10];
|
|
document.body.removeChild(div);
|
|
|
|
if (skin){
|
|
var skinobj = webix.skin[skin];
|
|
if (skinobj && skinobj != webix.skin.$active)
|
|
webix.skin.set(skin);
|
|
}
|
|
|
|
if (webix.env.$customScroll) return 0;
|
|
return width;
|
|
};
|
|
webix.ui.scrollSize = ((webix.env.touch||webix.env.$customScroll)?0:17);
|
|
webix.ready(function(){
|
|
var size = webix.ui._detectScrollSize();
|
|
webix.ui.scrollSize = webix.env.touch ? 0 : size;
|
|
});
|
|
|
|
webix.ui._uid = function(name){
|
|
return "$"+name+(this._namecount[name] = (this._namecount[name]||0)+1);
|
|
};
|
|
webix.ui._namecount = {};
|
|
|
|
webix.ui._fixHeight = function (){
|
|
webix.html.addStyle("html, body{ height:100%; }");
|
|
document.body.className+=" webix_full_screen";
|
|
webix.ui._fixHeight = function(){};
|
|
webix.Touch.limit(false);
|
|
};
|
|
webix.ui.resize = function(){
|
|
// check for virtual keyboard
|
|
|
|
if(webix.env.touch && ( webix.edit_open_time && (new Date())-webix.edit_open_time < 500 || webix._focus_time && (new Date())-webix._focus_time < 500))
|
|
return;
|
|
webix.UIManager.applyChanges();
|
|
webix.callEvent("onClick",[]);
|
|
if (!webix.ui.$freeze)
|
|
for (var i=resize.length - 1; i>=0; i--){
|
|
//remove destroyed views from resize list
|
|
if (resize[i].$destructed)
|
|
resize.splice(i,1);
|
|
else
|
|
resize[i].adjust();
|
|
}
|
|
};
|
|
webix.ui.each = function(parent, logic, master, include){
|
|
if (parent){
|
|
var children = include ? [parent] : parent.getChildViews();
|
|
for (var i = 0; i < children.length; i++){
|
|
if (logic.call((master || webix), children[i]) !== false)
|
|
webix.ui.each(children[i], logic, master);
|
|
}
|
|
}
|
|
};
|
|
webix.event(window, "resize", webix.ui.resize);
|
|
|
|
ui._delays = {};
|
|
ui.delay = function(config){
|
|
webix.ui._delays[config.id] = config;
|
|
};
|
|
ui.hasMethod = function(view, method){
|
|
var obj = webix.ui[view];
|
|
if (!obj) return false;
|
|
|
|
if (obj.$protoWait)
|
|
obj = obj.call(webix);
|
|
|
|
return !!webix.ui[view].prototype[method];
|
|
};
|
|
webix.ui.zIndex = function(){
|
|
return webix.ui.zIndexBase++;
|
|
};
|
|
webix.ui.zIndexBase = 100;
|
|
|
|
ui._view = function(config){
|
|
webix.assert_config(config);
|
|
if (config.view){
|
|
var view = config.view;
|
|
webix.assert(ui[view], "unknown view:"+view);
|
|
return new ui[view](config);
|
|
} else if (config.rows || config.cols){
|
|
var cells = config.rows||config.cols;
|
|
var accordion = false;
|
|
for (var i=0; i<cells.length; i++){
|
|
if (cells[i].body && !cells[i].view)
|
|
accordion = true;
|
|
}
|
|
if (accordion){
|
|
return new ui.headerlayout(config);
|
|
} else
|
|
return new ui.layout(config);
|
|
}
|
|
else if (config.cells)
|
|
return new ui.multiview(config);
|
|
else if (config.template || config.content)
|
|
return new ui.template(config);
|
|
else return new ui.spacer(config);
|
|
};
|
|
|
|
ui.views = {};
|
|
webix.$$ = function(id){
|
|
if (!id) return null;
|
|
|
|
if (ui.views[id]) return ui.views[id];
|
|
if (ui._delays[id]) return webix.ui(ui._delays[id]);
|
|
|
|
var name = id;
|
|
if (typeof id == "object"){
|
|
if (id._settings)
|
|
return id;
|
|
name = (id.target||id.srcElement)||id;
|
|
}
|
|
return ui.views[webix.html.locate({ target:webix.toNode(name)},"view_id")];
|
|
};
|
|
if (webix.isUndefined(window.$$)) window.$$=webix.$$;
|
|
|
|
webix.UIExtension = window.webix_view||{};
|
|
|
|
webix.protoUI({
|
|
name:"baseview",
|
|
//attribute , which will be used for ID storing
|
|
$init:function(config){
|
|
if (!config.id)
|
|
config.id = webix.ui._uid(this.name);
|
|
|
|
this._parent_cell = webix._parent_cell;
|
|
webix._parent_cell = null;
|
|
|
|
this.$scope = config.$scope || (this._parent_cell ? this._parent_cell.$scope : null);
|
|
|
|
if (!this._viewobj){
|
|
this._contentobj = this._viewobj = webix.html.create("DIV",{
|
|
"class":"webix_view"
|
|
});
|
|
this.$view = this._viewobj;
|
|
}
|
|
},
|
|
$skin:false,
|
|
defaults:{
|
|
width:0,
|
|
height:0,
|
|
gravity:1
|
|
},
|
|
getNode:function(){
|
|
return this._viewobj;
|
|
},
|
|
getParentView:function(){
|
|
return this._parent_cell||null;
|
|
},
|
|
getTopParentView:function(){
|
|
var parent = this.getParentView();
|
|
return parent ? parent.getTopParentView() : this;
|
|
},
|
|
getFormView:function(){
|
|
var parent = this.getParentView();
|
|
return (!parent || parent.setValues) ? parent : parent.getFormView();
|
|
},
|
|
getChildViews:function(){ return []; },
|
|
isVisible:function(base_id, prev_id){
|
|
if (this._settings.hidden){
|
|
if(base_id){
|
|
if (!this._hidden_render) {
|
|
this._hidden_render = [];
|
|
this._hidden_hash = {};
|
|
}
|
|
if (!this._hidden_hash[base_id]){
|
|
this._hidden_hash[base_id] = true;
|
|
this._hidden_render.push(base_id);
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
var parent = this.getParentView();
|
|
if (parent) return parent.isVisible(base_id, this._settings.id);
|
|
|
|
return true;
|
|
},
|
|
isEnabled:function(){
|
|
if(this._disable_cover)
|
|
return false;
|
|
|
|
var parent= this.getParentView();
|
|
if(parent)
|
|
return parent.isEnabled();
|
|
|
|
return true;
|
|
},
|
|
disable:function(){
|
|
webix.html.remove(this._disable_cover);
|
|
this._settings.disabled = true;
|
|
|
|
this._disable_cover = webix.html.create('div',{
|
|
"class":"webix_disabled"
|
|
});
|
|
|
|
if(window.getComputedStyle)
|
|
this._disabled_view_pos = window.getComputedStyle(this._viewobj, null).getPropertyValue("position");
|
|
|
|
if (this._disabled_view_pos != "absolute")
|
|
this._viewobj.style.position = "relative";
|
|
this._viewobj.appendChild(this._disable_cover);
|
|
webix.html.addCss(this._viewobj,"webix_disabled_view",true);
|
|
webix.UIManager._moveChildFocus(this);
|
|
},
|
|
enable:function(){
|
|
this._settings.disabled = false;
|
|
|
|
if (this._disable_cover){
|
|
webix.html.remove(this._disable_cover);
|
|
webix.html.removeCss(this._viewobj,"webix_disabled_view");
|
|
this._disable_cover = null;
|
|
if(this._disabled_view_pos)
|
|
this._viewobj.style.position = this._disabled_view_pos;
|
|
}
|
|
},
|
|
disabled_setter:function(value){
|
|
if (value)
|
|
this.disable();
|
|
else
|
|
this.enable();
|
|
return value;
|
|
},
|
|
container_setter:function(value){
|
|
webix.assert(webix.toNode(value),"Invalid container");
|
|
return true;
|
|
},
|
|
css_setter:function(value){
|
|
if (typeof value == "object")
|
|
value = webix.html.createCss(value);
|
|
|
|
this._viewobj.className += " "+value;
|
|
return value;
|
|
},
|
|
id_setter:function(value){
|
|
if (webix._global_collection && (webix._global_collection != this || this._prev_global_col)){
|
|
var oldvalue = this.config.$id = value;
|
|
(this._prev_global_col || webix._global_collection)._elements[value] = this;
|
|
value = webix.ui._uid(this.name);
|
|
(this._prev_global_col || webix._global_collection)._translate_ids[value]=oldvalue;
|
|
}
|
|
webix.assert(!webix.ui.views[value], "Non unique view id: "+value);
|
|
webix.ui.views[value] = this;
|
|
this._viewobj.setAttribute("view_id", value);
|
|
return value;
|
|
},
|
|
$setSize:function(x,y){
|
|
var last = this._last_size;
|
|
if (last && last[0]==x && last[1]==y) {
|
|
webix.debug_size_box(this, [x,y,"not changed"]);
|
|
return false;
|
|
}
|
|
|
|
webix.debug_size_box(this, [x,y]);
|
|
|
|
this._last_size = [x,y];
|
|
this.$width = this._content_width = x-(this._scroll_y?webix.ui.scrollSize:0);
|
|
this.$height = this._content_height = y-(this._scroll_x?webix.ui.scrollSize:0);
|
|
|
|
this._viewobj.style.width = x+"px";
|
|
this._viewobj.style.height = y+"px";
|
|
|
|
// temp. fix: Chrome [DIRTY]
|
|
if (webix.env.isWebKit){
|
|
var w = this._viewobj.offsetWidth;
|
|
var h = this._viewobj.offsetHeight;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
$getSize:function(dx, dy){
|
|
var s = this._settings;
|
|
|
|
var size = [
|
|
s.width || s.minWidth || 0,
|
|
s.width || s.maxWidth || 100000,
|
|
s.height || s.minHeight || 0,
|
|
s.height || s.maxHeight || 100000,
|
|
s.gravity
|
|
];
|
|
size[0]+=dx; size[1]+=dx;
|
|
size[2]+=dy; size[3]+=dy;
|
|
return size;
|
|
},
|
|
show:function(force, animate_settings){
|
|
var parent = this.getParentView();
|
|
var show = !arguments[2];
|
|
if (parent) {
|
|
if(!animate_settings && animate_settings !== false && this._settings.animate)
|
|
if (parent._settings.animate)
|
|
animate_settings = webix.extend((parent._settings.animate?webix.extend({},parent._settings.animate):{}), this._settings.animate, true);
|
|
|
|
if (show?parent._show:parent._hide)
|
|
(show?parent._show:parent._hide).call(parent, this, animate_settings);
|
|
if (show)
|
|
this._render_hidden_views();
|
|
if (force && show)
|
|
parent.show(force);
|
|
}
|
|
else{
|
|
if (this._settings.hidden){
|
|
if (show){
|
|
var node = webix.toNode(this._settings._container||document.body);
|
|
node.appendChild(this._viewobj);
|
|
this._settings.hidden = false;
|
|
|
|
this.adjust();
|
|
this._render_hidden_views();
|
|
}
|
|
} else {
|
|
if (!show){
|
|
this._settings.hidden = this._settings._hidden = true;
|
|
if (this._viewobj){
|
|
this._settings._container = this._viewobj.parentNode;
|
|
webix.html.remove(this._viewobj);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
_render_hidden_views:function(){
|
|
if (this._hidden_render){
|
|
for (var i=0; i < this._hidden_render.length; i++){
|
|
var ui_to_render = webix.$$(this._hidden_render[i]);
|
|
if (ui_to_render)
|
|
ui_to_render.render();
|
|
}
|
|
this._hidden_render = [];
|
|
this._hidden_hash = {};
|
|
}
|
|
},
|
|
hidden_setter:function(value){
|
|
if (value) this.hide();
|
|
return this._settings.hidden;
|
|
},
|
|
hide:function(){
|
|
this.show(null, null, true);
|
|
webix.UIManager._moveChildFocus(this);
|
|
},
|
|
adjust:function(){
|
|
if(!this._viewobj.parentNode)
|
|
return false;
|
|
|
|
var x = this._viewobj.parentNode.offsetWidth||0;
|
|
var y = this._viewobj.parentNode.offsetHeight||0;
|
|
|
|
var sizes=this.$getSize(0,0);
|
|
|
|
//minWidth
|
|
if (sizes[0]>x) x = sizes[0];
|
|
//minHeight
|
|
if (sizes[2]>y) y = sizes[2];
|
|
|
|
//maxWidth rule
|
|
if (x>sizes[1]) x = sizes[1];
|
|
//maxHeight rule
|
|
if (y>sizes[3]) y = sizes[3];
|
|
|
|
this.$setSize(x,y);
|
|
},
|
|
resize:function(force){
|
|
if (webix._child_sizing_active || webix.ui.$freeze) return;
|
|
|
|
var parent = this.getParentView();
|
|
if (parent){
|
|
if (parent.resizeChildren)
|
|
parent.resizeChildren();
|
|
else
|
|
parent.resize();
|
|
} else {
|
|
this.adjust();
|
|
webix.callEvent("onResize",[]);
|
|
}
|
|
}
|
|
}, webix.Settings, webix.Destruction, webix.BaseBind, webix.UIExtension);
|
|
|
|
|
|
|
|
/*
|
|
don't render borders itself , but aware of layout , which can set some borders
|
|
*/
|
|
webix.protoUI({
|
|
name:"view",
|
|
$init:function(config){
|
|
this._set_inner(config);
|
|
},
|
|
|
|
//deside, will component use borders or not
|
|
_set_inner:function(config){
|
|
var border_not_set = webix.isUndefined(config.borderless);
|
|
if (border_not_set && !this.setPosition && config.$topView){
|
|
config.borderless = true;
|
|
border_not_set = false;
|
|
}
|
|
|
|
if ((border_not_set && this.defaults.borderless) || config.borderless){
|
|
//button and custom borderless
|
|
config._inner = { top:true, left:true, bottom:true, right:true };
|
|
} else {
|
|
//default borders
|
|
if (!config._inner)
|
|
config._inner = {};
|
|
this._contentobj.style.borderWidth="1px";
|
|
}
|
|
},
|
|
|
|
$getSize:function(dx, dy){
|
|
|
|
var _borders = this._settings._inner;
|
|
if (_borders){
|
|
dx += (_borders.left?0:1)+(_borders.right?0:1);
|
|
dy += (_borders.top?0:1)+(_borders.bottom?0:1);
|
|
}
|
|
|
|
var size = webix.ui.baseview.prototype.$getSize.call(this, dx, dy);
|
|
|
|
webix.debug_size_box(this, size, true);
|
|
return size;
|
|
},
|
|
$setSize:function(x,y){
|
|
webix.debug_size_box(this, [x,y]);
|
|
|
|
var _borders = this._settings._inner;
|
|
if (_borders){
|
|
x -= (_borders.left?0:1)+(_borders.right?0:1);
|
|
y -= (_borders.top?0:1)+(_borders.bottom?0:1);
|
|
}
|
|
|
|
return webix.ui.baseview.prototype.$setSize.call(this,x,y);
|
|
}
|
|
}, webix.ui.baseview);
|
|
|
|
})();
|
|
|
|
webix.ui.view.call(webix);
|
|
|
|
webix.debug_size_indent = 0;
|
|
webix.debug_size_step = function(){
|
|
var str = "";
|
|
for (var i=0; i<webix.debug_size_indent; i++)
|
|
str+="| ";
|
|
return str;
|
|
};
|
|
webix.debug_size_box_start = function(comp, get){
|
|
if (!webix.debug_size) return;
|
|
if (!webix.debug_size_indent)
|
|
webix.log(get?"--- get sizes ---":"--- set sizes ---");
|
|
webix.log(webix.debug_size_step()+comp.name+"@"+comp.config.id);
|
|
webix.debug_size_indent++;
|
|
};
|
|
webix.debug_size_box_end = function(comp, sizes){
|
|
if (!webix.debug_size) return;
|
|
webix.debug_size_indent--;
|
|
webix.log(webix.debug_size_step()+sizes.join(","));
|
|
};
|
|
|
|
webix.debug_size_box = function(comp, sizes, get){
|
|
if (!webix.debug_size) return;
|
|
if (!webix.debug_size_indent)
|
|
webix.log(get?"--- get sizes ---":"--- set sizes ---");
|
|
webix.log(webix.debug_size_step()+comp.name+"@"+comp.config.id+" "+sizes.join(","));
|
|
};
|
|
|
|
webix.protoUI({
|
|
name:"spacer",
|
|
defaults:{
|
|
borderless:true
|
|
},
|
|
$init:function(){
|
|
this._viewobj.className += " webix_spacer";
|
|
}
|
|
}, webix.ui.view);
|
|
|
|
webix.protoUI({
|
|
name:"baselayout",
|
|
$init:function(config){
|
|
this.$ready.push(this._parse_cells);
|
|
this._dataobj = this._contentobj;
|
|
this._layout_sizes = [];
|
|
this._responsive = [];
|
|
|
|
if (config.$topView){
|
|
config.borderless = true;
|
|
config._inner = { top:true, left:true, bottom:true, right:true };
|
|
}
|
|
|
|
if (config.isolate)
|
|
webix.extend(this, webix.IdSpace);
|
|
},
|
|
rows_setter:function(value){
|
|
this._vertical_orientation = 1;
|
|
this._collection = value;
|
|
},
|
|
cols_setter:function(value){
|
|
this._vertical_orientation = 0;
|
|
this.$view.style.whiteSpace = "nowrap";
|
|
this._collection = value;
|
|
},
|
|
_remove:function(view){
|
|
webix.PowerArray.removeAt.call(this._cells, webix.PowerArray.find.call(this._cells, view));
|
|
this.resizeChildren(true);
|
|
},
|
|
_replace:function(new_view,target_id){
|
|
if (webix.isUndefined(target_id)){
|
|
for (var i=0; i < this._cells.length; i++)
|
|
this._cells[i].destructor();
|
|
this._collection = new_view;
|
|
this._parse_cells();
|
|
} else {
|
|
var source;
|
|
if (typeof target_id == "number"){
|
|
if (target_id<0 || target_id > this._cells.length)
|
|
target_id = this._cells.length;
|
|
var prev_node = (this._cells[target_id]||{})._viewobj;
|
|
webix.PowerArray.insertAt.call(this._cells, new_view, target_id);
|
|
if (!new_view._settings.hidden)
|
|
webix.html.insertBefore(new_view._viewobj, prev_node, this._dataobj);
|
|
} else {
|
|
source = webix.$$(target_id);
|
|
target_id = webix.PowerArray.find.call(this._cells, source);
|
|
webix.assert(target_id!=-1, "Attempt to replace the non-existing view");
|
|
var parent = source._viewobj.parentNode;
|
|
if (parent && !new_view._settings.hidden)
|
|
parent.insertBefore(new_view._viewobj, source._viewobj);
|
|
|
|
source.destructor();
|
|
this._cells[target_id] = new_view;
|
|
}
|
|
|
|
if (!this._vertical_orientation)
|
|
this._fix_vertical_layout(new_view);
|
|
|
|
this._cells[target_id]._parent_cell = this;
|
|
}
|
|
this.resizeChildren(true);
|
|
|
|
var form = this.elements ? this : this.getFormView();
|
|
if (form) form._recollect_elements();
|
|
|
|
webix.callEvent("onReconstruct",[this]);
|
|
},
|
|
_fix_vertical_layout:function(cell){
|
|
cell._viewobj.style.display = "inline-block";
|
|
cell._viewobj.style.verticalAlign = "top";
|
|
},
|
|
addView:function(view, index){
|
|
if (webix.isUndefined(index))
|
|
index = this._cells.length;
|
|
var top = this.getTopParentView();
|
|
top = (top && top.ui) ? top: webix;
|
|
return top.ui(view, this, index)._settings.id;
|
|
},
|
|
removeView:function(id){
|
|
var view;
|
|
if (typeof id != "object")
|
|
view = webix.$$(id);
|
|
else
|
|
view = id;
|
|
|
|
var target = webix.PowerArray.find.call(this._cells, view);
|
|
if (target >= 0){
|
|
if (this._beforeRemoveView)
|
|
this._beforeRemoveView(target, view);
|
|
|
|
var form = this.elements ? this : this.getFormView();
|
|
|
|
this._cells.splice(target, 1);
|
|
if (form)
|
|
webix.ui.each(view, function(sub){
|
|
if (sub.name)
|
|
delete form.getCleanValues()[sub.config.name];
|
|
}, form, true);
|
|
|
|
view.destructor();
|
|
this.resizeChildren(true);
|
|
|
|
if (form)
|
|
form._recollect_elements();
|
|
} else
|
|
webix.assert(false, "Attemp to remove not existing view: "+id);
|
|
|
|
webix.callEvent("onReconstruct",[this]);
|
|
},
|
|
reconstruct:function(){
|
|
this._hiddencells = 0;
|
|
this._replace(this._collection);
|
|
},
|
|
_hide:function(obj, settings, silent){
|
|
if (obj._settings.hidden) return;
|
|
obj._settings.hidden = true;
|
|
webix.html.remove(obj._viewobj);
|
|
this._hiddencells++;
|
|
if (!silent && !webix._ui_creation)
|
|
this.resizeChildren(true);
|
|
},
|
|
_signal_hidden_cells:function(view){
|
|
if (view.callEvent)
|
|
view.callEvent("onViewShow",[]);
|
|
},
|
|
resizeChildren:function(){
|
|
if (webix.ui.$freeze) return;
|
|
|
|
if (this._layout_sizes){
|
|
var parent = this.getParentView();
|
|
if (parent){
|
|
if (parent.resizeChildren)
|
|
return parent.resizeChildren();
|
|
else
|
|
return parent.resize();
|
|
}
|
|
|
|
var sizes = this.$getSize(0,0);
|
|
|
|
var x,y,nx,ny;
|
|
nx = x = this._layout_sizes[0] || 0;
|
|
ny = y = this._layout_sizes[1] || 0;
|
|
|
|
if (!parent){
|
|
//minWidth
|
|
if (sizes[0]>x) nx = sizes[0];
|
|
//minHeight
|
|
if (sizes[2]>y) ny = sizes[2];
|
|
|
|
//maxWidth rule
|
|
if (x>sizes[1]) nx = sizes[1];
|
|
//maxHeight rule
|
|
if (y>sizes[3]) ny = sizes[3];
|
|
|
|
this.$setSize(nx,ny);
|
|
} else
|
|
this._set_child_size(x,y);
|
|
|
|
webix.callEvent("onResize",[]);
|
|
}
|
|
},
|
|
getChildViews:function(){
|
|
return this._cells;
|
|
},
|
|
index:function(obj){
|
|
if (obj._settings)
|
|
obj = obj._settings.id;
|
|
for (var i=0; i < this._cells.length; i++)
|
|
if (this._cells[i]._settings.id == obj)
|
|
return i;
|
|
return -1;
|
|
},
|
|
_show:function(obj, settings, silent){
|
|
|
|
if (!obj._settings.hidden) return;
|
|
obj._settings.hidden = false;
|
|
|
|
//index of sibling cell, next to which new item will appear
|
|
var index = this.index(obj)+1;
|
|
//locate nearest visible cell
|
|
while (this._cells[index] && this._cells[index]._settings.hidden) index++;
|
|
var view = this._cells[index] ? this._cells[index]._viewobj : null;
|
|
|
|
webix.html.insertBefore(obj._viewobj, view, (this._dataobj||this._viewobj));
|
|
this._hiddencells--;
|
|
|
|
if (!silent){
|
|
this.resizeChildren(true);
|
|
if (obj.refresh)
|
|
obj.refresh();
|
|
}
|
|
|
|
if (obj.callEvent){
|
|
obj.callEvent("onViewShow", []);
|
|
webix.ui.each(obj, this._signal_hidden_cells);
|
|
}
|
|
},
|
|
showBatch:function(name, mode){
|
|
var preserve = typeof mode != "undefined";
|
|
mode = mode !== false;
|
|
|
|
if (!preserve){
|
|
if (this._settings.visibleBatch == name ) return;
|
|
this._settings.visibleBatch = name;
|
|
} else
|
|
this._settings.visibleBatch = "";
|
|
|
|
var show = [];
|
|
for (var i=0; i < this._cells.length; i++){
|
|
if (!this._cells[i]._settings.batch)
|
|
show.push(this._cells[i]);
|
|
else if (this._cells[i]._settings.batch == name){
|
|
if (mode)
|
|
show.push(this._cells[i]);
|
|
else
|
|
this._hide(this._cells[i], null, true);
|
|
} else if (!preserve)
|
|
this._hide(this._cells[i], null, true);
|
|
}
|
|
|
|
for (var i=0; i < show.length; i++){
|
|
this._show(show[i], null, true);
|
|
show[i]._render_hidden_views();
|
|
}
|
|
|
|
this.resizeChildren(true);
|
|
},
|
|
_parse_cells:function(collection){
|
|
this._cells=[];
|
|
|
|
webix.assert(collection,this.name+" was incorrectly defined. <br><br> You have missed rows|cols|cells|elements collection");
|
|
for (var i=0; i<collection.length; i++){
|
|
webix._parent_cell = this;
|
|
if (!collection[i]._inner)
|
|
collection[i].borderless = true;
|
|
|
|
this._cells[i]=webix.ui._view(collection[i], this);
|
|
if (!this._vertical_orientation)
|
|
this._fix_vertical_layout(this._cells[i]);
|
|
|
|
if (this._settings.visibleBatch && this._settings.visibleBatch != this._cells[i]._settings.batch && this._cells[i]._settings.batch){
|
|
this._cells[i]._settings.hidden = true;
|
|
this._hiddencells++;
|
|
}
|
|
|
|
if (!this._cells[i]._settings.hidden){
|
|
(this._dataobj||this._contentobj).appendChild(this._cells[i]._viewobj);
|
|
if (this._cells[i].$nospace)
|
|
this._hiddencells++;
|
|
}
|
|
}
|
|
|
|
if (this._parse_cells_ext_end)
|
|
this._parse_cells_ext_end(collection);
|
|
},
|
|
_bubble_size:function(prop, size, vertical){
|
|
if (this._vertical_orientation != vertical)
|
|
for (var i=0; i<this._cells.length; i++){
|
|
this._cells[i]._settings[prop] = size;
|
|
if (this._cells[i]._bubble_size)
|
|
this._cells[i]._bubble_size(prop, size, vertical);
|
|
}
|
|
},
|
|
$getSize:function(dx, dy){
|
|
webix.debug_size_box_start(this, true);
|
|
var minWidth = 0;
|
|
var maxWidth = 100000;
|
|
var maxHeight = 100000;
|
|
var minHeight = 0;
|
|
if (this._vertical_orientation) maxHeight=0; else maxWidth = 0;
|
|
|
|
var fixed = 0;
|
|
var fixed_count = 0;
|
|
var gravity = 0;
|
|
this._sizes=[];
|
|
|
|
for (var i=0; i < this._cells.length; i++) {
|
|
//ignore hidden cells
|
|
if (this._cells[i]._settings.hidden)
|
|
continue;
|
|
|
|
var sizes = this._sizes[i] = this._cells[i].$getSize(0,0);
|
|
|
|
if (this._cells[i].$nospace){
|
|
fixed_count++;
|
|
continue;
|
|
}
|
|
|
|
if (this._vertical_orientation){
|
|
//take max minSize value
|
|
if (sizes[0]>minWidth) minWidth = sizes[0];
|
|
//take min maxSize value
|
|
if (sizes[1]<maxWidth) maxWidth = sizes[1];
|
|
|
|
minHeight += sizes[2];
|
|
maxHeight += sizes[3];
|
|
|
|
if (sizes[2] == sizes[3] && sizes[2] != -1){ fixed+=sizes[2]; fixed_count++; }
|
|
else gravity += sizes[4];
|
|
} else {
|
|
//take max minSize value
|
|
if (sizes[2]>minHeight) minHeight = sizes[2];
|
|
//take min maxSize value
|
|
if (sizes[3]<maxHeight) maxHeight = sizes[3];
|
|
|
|
minWidth += sizes[0];
|
|
maxWidth += sizes[1];
|
|
|
|
if (sizes[0] == sizes[1] && sizes[0] != -1){ fixed+=sizes[0]; fixed_count++; }
|
|
else gravity += sizes[4];
|
|
}
|
|
}
|
|
|
|
if (minHeight>maxHeight)
|
|
maxHeight = minHeight;
|
|
if (minWidth>maxWidth)
|
|
maxWidth = minWidth;
|
|
|
|
this._master_size = [fixed, this._cells.length - fixed_count, gravity];
|
|
this._desired_size = [minWidth+dx, minHeight+dy];
|
|
|
|
//get layout sizes
|
|
var self_size = webix.ui.baseview.prototype.$getSize.call(this, 0, 0);
|
|
//use child settings if layout's one was not defined
|
|
if (self_size[1] >= 100000) self_size[1]=0;
|
|
if (self_size[3] >= 100000) self_size[3]=0;
|
|
|
|
self_size[0] = (self_size[0] || minWidth ) +dx;
|
|
self_size[1] = Math.max(self_size[0], (self_size[1] || maxWidth ) +dx);
|
|
self_size[2] = (self_size[2] || minHeight) +dy;
|
|
self_size[3] = Math.max(self_size[2], (self_size[3] || maxHeight) +dy);
|
|
|
|
webix.debug_size_box_end(this, self_size);
|
|
|
|
if (this._settings.responsive)
|
|
self_size[0] = 0;
|
|
|
|
return self_size;
|
|
},
|
|
$setSize:function(x,y){
|
|
this._layout_sizes = [x,y];
|
|
webix.debug_size_box_start(this);
|
|
|
|
webix.ui.baseview.prototype.$setSize.call(this,x,y);
|
|
this._set_child_size(x,y);
|
|
|
|
webix.debug_size_box_end(this, [x,y]);
|
|
},
|
|
_set_child_size_a:function(sizes, min, max){
|
|
min = sizes[min]; max = sizes[max];
|
|
var height = min;
|
|
|
|
if (min != max){
|
|
var ps = this._set_size_delta * sizes[4]/this._set_size_gravity;
|
|
if (ps < min){
|
|
height = min;
|
|
this._set_size_gravity -= sizes[4];
|
|
this._set_size_delta -= height;
|
|
} else if (ps > max){
|
|
height = max;
|
|
this._set_size_gravity -= sizes[4];
|
|
this._set_size_delta -= height;
|
|
} else {
|
|
return -1;
|
|
}
|
|
}
|
|
|
|
return height;
|
|
},
|
|
_responsive_hide:function(cell, mode){
|
|
var target = webix.$$(mode);
|
|
|
|
if (target === "hide" || !target){
|
|
cell.hide();
|
|
webix.delay(this.resize, this);
|
|
cell._responsive_marker = "hide";
|
|
} else{
|
|
//for SideBar in Webix 1.9
|
|
if (!target)
|
|
target = webix.ui({ view:"popup", body:[{}]});
|
|
|
|
cell._responsive_width = cell._settings.width;
|
|
cell._responsive_height = cell._settings.height;
|
|
cell._responsive_marker = target._settings.id;
|
|
cell._settings.width = 0;
|
|
if (!cell._settings.height)
|
|
cell._settings.autoheight = true;
|
|
|
|
webix.ui(cell, target, this._responsive.length);
|
|
}
|
|
|
|
this._responsive.push(cell);
|
|
},
|
|
_responsive_show:function(cell){
|
|
var target = cell._responsive_marker;
|
|
cell._responsive_marker = 0;
|
|
|
|
if (target === "hide" || !target){
|
|
cell.show();
|
|
webix.delay(this.resize, this);
|
|
} else {
|
|
cell._settings.width = cell._responsive_width;
|
|
cell._settings.height = cell._responsive_height;
|
|
delete cell._settings.autoheight;
|
|
|
|
webix.ui(cell, this, 0);
|
|
}
|
|
this._responsive.pop();
|
|
},
|
|
_responsive_cells:function(x,y){
|
|
if (this._responsive_tinkery) return;
|
|
this._responsive_tinkery = true;
|
|
|
|
if (x < this._desired_size[0]){
|
|
for (var i = 0; i < this._cells.length-1; i++){
|
|
var cell = this._cells[i];
|
|
if (!cell._responsive_marker){
|
|
this._responsive_hide(cell, this._settings.responsive);
|
|
break;
|
|
}
|
|
}
|
|
} else if (this._responsive.length){
|
|
var cell = this._responsive[this._responsive.length-1];
|
|
var dx = cell._responsive_marker == "hide" ? 0 : cell._responsive_width;
|
|
var px = cell.$getSize(dx,0);
|
|
if (px[0] + this._desired_size[0] + this._paddingX + 20 <= x )
|
|
this._responsive_show(cell);
|
|
}
|
|
|
|
this._responsive_tinkery = false;
|
|
},
|
|
_set_child_size:function(x,y){
|
|
webix._child_sizing_active = (webix._child_sizing_active||0)+1;
|
|
|
|
if (this._settings.responsive)
|
|
this._responsive_cells(x,y);
|
|
|
|
this._set_size_delta = (this._vertical_orientation?y:x) - this._master_size[0];
|
|
this._set_size_gravity = this._master_size[2];
|
|
var width = x; var height = y;
|
|
|
|
var auto = [];
|
|
for (var i=0; i < this._cells.length; i++){
|
|
//ignore hidden cells
|
|
if (this._cells[i]._settings.hidden)
|
|
continue;
|
|
|
|
var sizes = this._sizes[i];
|
|
|
|
if (this._vertical_orientation){
|
|
var height = this._set_child_size_a(sizes,2,3);
|
|
if (height < 0) { auto.push(i); continue; }
|
|
} else {
|
|
var width = this._set_child_size_a(sizes,0,1);
|
|
if (width < 0) { auto.push(i); continue; }
|
|
}
|
|
this._cells[i].$setSize(width,height);
|
|
}
|
|
|
|
for (var i = 0; i < auto.length; i++){
|
|
var index = auto[i];
|
|
var sizes = this._sizes[index];
|
|
var dx = Math.round(this._set_size_delta * sizes[4]/this._set_size_gravity);
|
|
this._set_size_delta -= dx; this._set_size_gravity -= sizes[4];
|
|
if (this._vertical_orientation)
|
|
height = dx;
|
|
else {
|
|
width = dx;
|
|
|
|
}
|
|
|
|
this._cells[index].$setSize(width,height);
|
|
}
|
|
|
|
webix._child_sizing_active -= 1;
|
|
},
|
|
_next:function(obj, mode){
|
|
var index = this.index(obj);
|
|
if (index == -1) return null;
|
|
return this._cells[index+mode];
|
|
},
|
|
_first:function(){
|
|
return this._cells[0];
|
|
}
|
|
}, webix.EventSystem, webix.ui.baseview);
|
|
|
|
|
|
|
|
|
|
webix.protoUI({
|
|
name:"layout",
|
|
$init:function(config){
|
|
this._hiddencells = 0;
|
|
},
|
|
defaults:{
|
|
type:"line"
|
|
},
|
|
_parse_cells:function(){
|
|
if (this._parse_cells_ext)
|
|
collection = this._parse_cells_ext(collection);
|
|
|
|
if (!this._parse_once){
|
|
this._viewobj.className += " webix_layout_"+(this._settings.type||"");
|
|
this._parse_once = 1;
|
|
}
|
|
|
|
if (this._settings.margin !== webix.undefined)
|
|
this._margin = this._settings.margin;
|
|
|
|
if (this._settings.padding != webix.undefined)
|
|
this._paddingX = this._paddingY = this._settings.padding;
|
|
if (this._settings.paddingX !== webix.undefined)
|
|
this._paddingX = this._settings.paddingX;
|
|
if (this._settings.paddingY !== webix.undefined)
|
|
this._paddingY = this._settings.paddingY;
|
|
|
|
if (this._paddingY || this._paddingX)
|
|
this._padding = true;
|
|
|
|
//if layout has paddings we need to set the visible border
|
|
if (this._hasBorders() && !this._settings.borderless){
|
|
this._contentobj.style.borderWidth="1px";
|
|
//if layout has border - normal bordering rules are applied
|
|
this._render_borders = true;
|
|
}
|
|
|
|
|
|
var collection = this._collection;
|
|
|
|
if (this._settings.borderless)
|
|
this._settings._inner = { top:true, left:true, right:true, bottom:true};
|
|
|
|
this._beforeResetBorders(collection);
|
|
webix.ui.baselayout.prototype._parse_cells.call(this, collection);
|
|
this._afterResetBorders(collection);
|
|
},
|
|
$getSize:function(dx, dy){
|
|
dx=dx||0; dy=dy||0;
|
|
|
|
var correction = this._margin*(this._cells.length-this._hiddencells-1);
|
|
if (this._render_borders || this._hasBorders()){
|
|
var _borders = this._settings._inner;
|
|
if (_borders){
|
|
dx += (_borders.left?0:1)+(_borders.right?0:1);
|
|
dy += (_borders.top?0:1)+(_borders.bottom?0:1);
|
|
}
|
|
}
|
|
|
|
if (!this._settings.height)
|
|
dy += (this._paddingY||0)*2 + (this._vertical_orientation ? correction : 0);
|
|
|
|
if (!this._settings.width)
|
|
dx += (this._paddingX||0)*2 + (this._vertical_orientation ? 0 : correction);
|
|
|
|
return webix.ui.baselayout.prototype.$getSize.call(this, dx, dy);
|
|
},
|
|
$setSize:function(x,y){
|
|
|
|
this._layout_sizes = [x,y];
|
|
webix.debug_size_box_start(this);
|
|
|
|
var result;
|
|
if (this._hasBorders()||this._render_borders)
|
|
result = webix.ui.view.prototype.$setSize.call(this,x,y);
|
|
else
|
|
result = webix.ui.baseview.prototype.$setSize.call(this,x,y);
|
|
|
|
//form with scroll
|
|
y = this._content_height;
|
|
x = this._content_width;
|
|
|
|
var config = this._settings;
|
|
if (config.scroll){
|
|
y = Math.max(y, this._desired_size[1]);
|
|
x = Math.max(x, this._desired_size[0]);
|
|
}
|
|
|
|
this._set_child_size(x, y);
|
|
|
|
webix.debug_size_box_end(this, [x,y]);
|
|
},
|
|
_set_child_size:function(x,y){
|
|
var correction = this._margin*(this._cells.length-this._hiddencells-1);
|
|
|
|
if (this._vertical_orientation){
|
|
y-=correction+this._paddingY*2;
|
|
x-=this._paddingX*2;
|
|
}
|
|
else {
|
|
x-=correction+this._paddingX*2;
|
|
y-=this._paddingY*2;
|
|
}
|
|
return webix.ui.baselayout.prototype._set_child_size.call(this, x, y);
|
|
},
|
|
resizeChildren:function(structure_changed){
|
|
if (structure_changed){
|
|
this._last_size = null; //forces children resize
|
|
var config = [];
|
|
for (var i = 0; i < this._cells.length; i++){
|
|
var cell = this._cells[i];
|
|
config[i] = cell._settings;
|
|
var n = ((cell._layout_sizes && !cell._render_borders) || cell._settings.borderless)?"0px":"1px";
|
|
|
|
cell._viewobj.style.borderTopWidth=cell._viewobj.style.borderBottomWidth=cell._viewobj.style.borderLeftWidth=cell._viewobj.style.borderRightWidth=n;
|
|
}
|
|
|
|
this._beforeResetBorders(config);
|
|
for (var i=0; i<config.length; i++)
|
|
if (config[i].borderless && this._cells[i]._set_inner)
|
|
this._cells[i]._set_inner(config[i]);
|
|
this._afterResetBorders(this._cells);
|
|
}
|
|
|
|
webix.ui.baselayout.prototype.resizeChildren.call(this);
|
|
},
|
|
_hasBorders:function(){
|
|
return this._padding && this._margin>0 && !this._cleanlayout;
|
|
},
|
|
_beforeResetBorders:function(collection){
|
|
if (this._hasBorders() && (!this._settings.borderless || this._settings.type == "space")){
|
|
for (var i=0; i < collection.length; i++){
|
|
if (!collection[i]._inner || !collection[i].borderless)
|
|
collection[i]._inner={ top:false, left:false, right:false, bottom:false};
|
|
}
|
|
} else {
|
|
for (var i=0; i < collection.length; i++)
|
|
collection[i]._inner=webix.clone(this._settings._inner);
|
|
var mode = false;
|
|
if (this._cleanlayout)
|
|
mode = true;
|
|
|
|
var maxlength = collection.length;
|
|
if (this._vertical_orientation){
|
|
for (var i=1; i < maxlength-1; i++)
|
|
collection[i]._inner.top = collection[i]._inner.bottom = mode;
|
|
if (maxlength>1){
|
|
if (this._settings.type!="head")
|
|
collection[0]._inner.bottom = mode;
|
|
|
|
while (collection[maxlength-1].hidden && maxlength>1)
|
|
maxlength--;
|
|
if (maxlength>0)
|
|
collection[maxlength-1]._inner.top = mode;
|
|
}
|
|
}
|
|
else {
|
|
for (var i=1; i < maxlength-1; i++)
|
|
collection[i]._inner.left = collection[i]._inner.right= mode;
|
|
if (maxlength>1){
|
|
if (this._settings.type!="head")
|
|
collection[0]._inner.right= mode;
|
|
collection[maxlength-1]._inner.left = mode;
|
|
|
|
while (maxlength>1 && collection[maxlength-1].hidden)
|
|
maxlength--;
|
|
if (maxlength>0)
|
|
collection[maxlength-1]._inner.left = mode;
|
|
}
|
|
}
|
|
|
|
}
|
|
},
|
|
_fix_container_borders:function(style, inner){
|
|
if (inner.top)
|
|
style.borderTopWidth="0px";
|
|
if (inner.left)
|
|
style.borderLeftWidth="0px";
|
|
if (inner.right)
|
|
style.borderRightWidth="0px";
|
|
if (inner.bottom)
|
|
style.borderBottomWidth="0px";
|
|
},
|
|
_afterResetBorders:function(collection){
|
|
var start = 0;
|
|
for (var i=0; i<collection.length; i++){
|
|
var cell = this._cells[i];
|
|
|
|
var s_inner = cell._settings._inner;
|
|
if (cell._settings.hidden && this._cells[i+1]){
|
|
var s_next = this._cells[i+1]._settings._inner;
|
|
if (!s_inner.top)
|
|
s_next.top = false;
|
|
if (!s_inner.left)
|
|
s_next.left = false;
|
|
|
|
if (i==start) start++;
|
|
}
|
|
this._fix_container_borders(cell._viewobj.style, cell._settings._inner);
|
|
}
|
|
|
|
var style = this._vertical_orientation?"marginLeft":"marginTop";
|
|
var contrstyle = this._vertical_orientation?"marginTop":"marginLeft";
|
|
var padding = this._vertical_orientation?this._paddingX:this._paddingY;
|
|
var contrpadding = this._vertical_orientation?this._paddingY:this._paddingX;
|
|
|
|
//add top offset to all
|
|
for (var i=0; i<collection.length; i++)
|
|
this._cells[i]._viewobj.style[style] = (padding||0) + "px";
|
|
|
|
//add left offset to first cell
|
|
if (this._cells.length)
|
|
this._cells[start]._viewobj.style[contrstyle] = (contrpadding||0)+"px";
|
|
|
|
//add offset between cells
|
|
for (var index=start+1; index<collection.length; index++)
|
|
this._cells[index]._viewobj.style[contrstyle]=this._margin+"px";
|
|
|
|
},
|
|
type_setter:function(value){
|
|
this._margin = (typeof this._margin_set[value] != "undefined"? this._margin_set[value]: this._margin_set["line"]);
|
|
this._paddingX = this._paddingY = (typeof this._margin_set[value] != "undefined"? this._padding_set[value]: this._padding_set["line"]);
|
|
this._cleanlayout = (value=="material" || value=="clean");
|
|
if (value == "material")
|
|
this._settings.borderless = true;
|
|
|
|
return value;
|
|
},
|
|
$skin:function(){
|
|
var skin = webix.skin.$active;
|
|
this._margin_set = skin.layoutMargin;
|
|
this._padding_set = skin.layoutPadding;
|
|
}
|
|
}, webix.ui.baselayout);
|
|
|
|
webix.ui.layout.call(webix);
|
|
|
|
|
|
|
|
webix.animate = function(html_element, config){
|
|
var animation = config;
|
|
if (webix.isArray(html_element)){
|
|
for (var i=0; i < html_element.length; i++) {
|
|
if(webix.isArray(config))
|
|
animation = config[i];
|
|
|
|
if(animation.type == 'slide'){
|
|
if(animation.subtype == 'out' && i===0) { // next
|
|
continue;
|
|
}
|
|
if(animation.subtype == 'in' && i==1) { // current
|
|
continue;
|
|
}
|
|
}
|
|
if(animation.type == 'flip'){
|
|
var animation_copy = webix.clone(animation);
|
|
if(i===0) { // next
|
|
animation_copy.type = 'flipback';
|
|
}
|
|
if(i==1) { // current
|
|
animation_copy.callback = null;
|
|
}
|
|
webix.animate(html_element[i], animation_copy);
|
|
continue;
|
|
}
|
|
webix.animate(html_element[i], animation);
|
|
}
|
|
return;
|
|
}
|
|
var node = webix.toNode(html_element);
|
|
if (node._has_animation)
|
|
webix.animate.end(node, animation);
|
|
else
|
|
webix.animate.start(node, animation);
|
|
};
|
|
webix.animate.end = function(node, animation){
|
|
//stop animation
|
|
node.style[webix.env.transitionDuration] = "1ms";
|
|
node._has_animation = null;
|
|
//clear animation wait order, if any
|
|
if (webix._wait_animate)
|
|
window.clearTimeout(webix._wait_animate);
|
|
|
|
//plan next animation, if any
|
|
webix._wait_animate = webix.delay(webix.animate, webix, [node,animation],10);
|
|
};
|
|
webix.animate.isSupported=function(){
|
|
return !webix.$testmode && !webix.noanimate && webix.env.transform && webix.env.transition && !webix.env.isOpera;
|
|
};
|
|
webix.animate.formLine=function(next, current, animation){
|
|
var direction = animation.direction;
|
|
current.parentNode.style.position = "relative";
|
|
current.style.position = "absolute";
|
|
next.style.position = "absolute";
|
|
|
|
//this is initial shift of second view in animation
|
|
//normally we need to have this value as 0
|
|
//but FF has bug with animation initially invisible elements
|
|
//so we are adjusting this value, to make 1px of second view visible
|
|
var defAniPos = webix.env.isFF ? ( direction == "top" || direction == "left" ? -1 : 1) : 0;
|
|
|
|
if(direction=="top"||direction=="bottom"){
|
|
next.style.left="0px";
|
|
next.style.top = (animation.top || defAniPos) + (direction=="top"?1:-1)*current.offsetHeight+"px";
|
|
}
|
|
else{
|
|
next.style.top = (animation.top || 0) + "px";
|
|
next.style.left = defAniPos + (direction=="left"?1:-1)*current.offsetWidth+"px";
|
|
}
|
|
|
|
// apply 'keepViews' mode, iframe solution
|
|
//( keepViews won't work in case of "in" and "out" subtypes )
|
|
if(current.parentNode == next.parentNode && animation.keepViews)
|
|
next.style.display = "";
|
|
else
|
|
webix.html.insertBefore(next, current.nextSibling, current.parentNode);
|
|
|
|
if(animation.type == 'slide' && animation.subtype == 'out') {
|
|
next.style.left = "0px";
|
|
next.style.top = (animation.top || 0)+"px";
|
|
current.parentNode.removeChild(current);
|
|
webix.html.insertBefore(current, next.nextSibling, next.parentNode);
|
|
}
|
|
return [next, current];
|
|
};
|
|
webix.animate.breakLine=function(line){
|
|
if(arguments[1])
|
|
line[1].style.display = "none"; // 'keepViews' multiview mode
|
|
else
|
|
webix.html.remove(line[1]); // 1 = current
|
|
webix.animate.clear(line[0]);
|
|
webix.animate.clear(line[1]);
|
|
line[0].style.position="";
|
|
};
|
|
webix.animate.clear=function(node){
|
|
node.style[webix.env.transform] = "none";
|
|
node.style[webix.env.transition] = "none";
|
|
node.style.top = node.style.left = "";
|
|
};
|
|
webix.animate.defaults = {
|
|
type: 'slide',
|
|
delay: '0',
|
|
duration: '500',
|
|
timing: 'ease-in-out',
|
|
x: 0,
|
|
y: 0
|
|
};
|
|
webix.animate.start = function(node, animation){
|
|
//getting config object by merging specified and default options
|
|
if (typeof animation == 'string')
|
|
animation = {type: animation};
|
|
|
|
animation = webix.Settings._mergeSettings(animation,webix.animate.defaults);
|
|
|
|
var prefix = webix.env.cssPrefix;
|
|
var settings = node._has_animation = animation;
|
|
var skew_options, scale_type;
|
|
|
|
//jshint -W086:true
|
|
switch(settings.type == 'slide' && settings.direction) { // getting new x, y in case it is slide with direction
|
|
case 'right':
|
|
settings.x = node.offsetWidth;
|
|
break;
|
|
case 'left':
|
|
settings.x = -node.offsetWidth;
|
|
break;
|
|
case 'top':
|
|
settings.y = -node.offsetHeight;
|
|
break;
|
|
case 'bottom':
|
|
default:
|
|
settings.y = settings.y||node.offsetHeight;
|
|
break;
|
|
}
|
|
|
|
if(settings.type == 'flip' || settings.type == 'flipback') {
|
|
skew_options = [0, 0];
|
|
scale_type = 'scaleX';
|
|
if(settings.subtype == 'vertical') {
|
|
skew_options[0] = 20;
|
|
scale_type = 'scaleY';
|
|
}
|
|
else
|
|
skew_options[1] = 20;
|
|
if(settings.direction == 'right' || settings.direction == 'bottom') {
|
|
skew_options[0] *= -1; skew_options[1] *= -1;
|
|
}
|
|
}
|
|
|
|
var duration = settings.duration + "ms " + settings.timing + " " + settings.delay+"ms";
|
|
var css_general = prefix+"TransformStyle: preserve-3d;"; // general css rules
|
|
var css_transition = '';
|
|
var css_transform = '';
|
|
|
|
switch(settings.type) {
|
|
case 'fade': // changes opacity to 0
|
|
css_transition = "opacity " + duration;
|
|
css_general = "opacity: 0;";
|
|
break;
|
|
case 'show': // changes opacity to 1
|
|
css_transition = "opacity " + duration;
|
|
css_general = "opacity: 1;";
|
|
break;
|
|
case 'flip':
|
|
duration = (settings.duration/2) + "ms " + settings.timing + " " + settings.delay+"ms";
|
|
css_transform = "skew("+skew_options[0]+"deg, "+skew_options[1]+"deg) "+scale_type+"(0.00001)";
|
|
css_transition = "all "+(duration);
|
|
break;
|
|
case 'flipback':
|
|
settings.delay += settings.duration/2;
|
|
duration = (settings.duration/2) + "ms " + settings.timing + " " + settings.delay+"ms";
|
|
node.style[webix.env.transform] = "skew("+(-1*skew_options[0])+"deg, "+(-1*skew_options[1])+"deg) "+scale_type+"(0.00001)";
|
|
node.style.left = "0";
|
|
|
|
css_transform = "skew(0deg, 0deg) "+scale_type+"(1)";
|
|
css_transition = "all "+(duration);
|
|
break;
|
|
case 'slide': // moves object to specified location
|
|
var x = settings.x +"px";
|
|
var y = settings.y +"px";
|
|
// translate(x, y) OR translate3d(x, y, 0)
|
|
css_transform = webix.env.translate+"("+x+", "+y+((webix.env.translate=="translate3d")?", 0":"")+")";
|
|
css_transition = prefix+"transform " + duration;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
//set styles only after applying transition settings
|
|
webix.delay(function(){
|
|
node.style[webix.env.transition] = css_transition;
|
|
webix.delay(function(){
|
|
if (css_general)
|
|
node.style.cssText += css_general;
|
|
if (css_transform)
|
|
node.style[webix.env.transform] = css_transform;
|
|
var transitionEnded = false;
|
|
var tid = webix.event(node, webix.env.transitionEnd, function(ev){
|
|
node._has_animation = null;
|
|
if (settings.callback) settings.callback.call((settings.master||window), node,settings,ev);
|
|
transitionEnded = true;
|
|
webix.eventRemove(tid);
|
|
});
|
|
window.setTimeout(function(){
|
|
if(!transitionEnded){
|
|
node._has_animation = null;
|
|
if (settings.callback) settings.callback.call((settings.master||window), node,settings);
|
|
transitionEnded = true;
|
|
webix.eventRemove(tid);
|
|
}
|
|
}, (settings.duration*1+settings.delay*1)*1.3);
|
|
});
|
|
});
|
|
};
|
|
|
|
/*
|
|
Behavior:MouseEvents - provides inner evnets for mouse actions
|
|
*/
|
|
|
|
webix.MouseEvents={
|
|
$init: function(config){
|
|
config = config || {};
|
|
|
|
this._clickstamp = 0;
|
|
this._dbl_sensetive = 300;
|
|
this._item_clicked = null;
|
|
|
|
this._mouse_action_extend(config.onClick, "on_click");
|
|
this._mouse_action_extend(config.onContext, "on_context");
|
|
this._mouse_action_extend(config.onDblClick, "on_dblclick");
|
|
this._mouse_action_extend(config.onMouseMove, "on_mouse_move");
|
|
|
|
//attach dom events if related collection is defined
|
|
if (this.on_click){
|
|
webix.event(this._contentobj,"click",this._onClick,{bind:this});
|
|
if (webix.env.isIE8 && this.on_dblclick)
|
|
webix.event(this._contentobj, "dblclick", this._onDblClick, {bind:this});
|
|
}
|
|
if (this.on_context)
|
|
webix.event(this._contentobj,"contextmenu",this._onContext,{bind:this});
|
|
|
|
if (this.on_mouse_move)
|
|
this._enable_mouse_move();
|
|
},
|
|
|
|
_enable_mouse_move:function(){
|
|
if (!this._mouse_move_enabled){
|
|
this.on_mouse_move = this.on_mouse_move || {};
|
|
webix.event(this._contentobj,"mousemove",this._onMouse,{bind:this});
|
|
webix.event(this._contentobj,(webix.env.isIE?"mouseleave":"mouseout"),this._onMouse,{bind:this});
|
|
this._mouse_move_enabled = 1;
|
|
}
|
|
|
|
},
|
|
|
|
_mouse_action_extend:function(config, key){
|
|
if (config){
|
|
var now = this[key];
|
|
var step = now ? webix.extend({}, now) : {};
|
|
this[key] = webix.extend(step, config);
|
|
}
|
|
},
|
|
|
|
//inner onclick object handler
|
|
_onClick: function(e){
|
|
if(!this.isEnabled())
|
|
return false;
|
|
|
|
webix.UIManager._focus_action(this);
|
|
if(this.on_dblclick){
|
|
// emulates double click
|
|
var stamp = (new Date()).valueOf();
|
|
|
|
if (stamp - this._clickstamp <= this._dbl_sensetive && this.locate){
|
|
var item = this.locate(e);
|
|
if (""+item == ""+this._item_clicked) {
|
|
this._clickstamp = 0;
|
|
return this._onDblClick(e);
|
|
}
|
|
}
|
|
this._clickstamp = stamp;
|
|
}
|
|
|
|
var result = this._mouseEvent(e,this.on_click,"ItemClick");
|
|
return result;
|
|
},
|
|
//inner ondblclick object handler
|
|
_onDblClick: function(e) {
|
|
return this._mouseEvent(e,this.on_dblclick,"ItemDblClick");
|
|
},
|
|
//process oncontextmenu events
|
|
_onContext: function(e) {
|
|
this._mouseEvent(e, this.on_context, "BeforeContextMenu", "AfterContextMenu");
|
|
},
|
|
/*
|
|
event throttler - ignore events which occurs too fast
|
|
during mouse moving there are a lot of event firing - we need no so much
|
|
also, mouseout can fire when moving inside the same html container - we need to ignore such fake calls
|
|
*/
|
|
_onMouse:function(e){
|
|
if (document.createEventObject) //make a copy of event, will be used in timed call
|
|
e = document.createEventObject(event);
|
|
else if (!webix.$testmode && !webix.isUndefined(e.movementY) && !e.movementY && !e.movementX)
|
|
return; //logitech mouse driver can send false signals in Chrome
|
|
|
|
|
|
|
|
|
|
if (this._mouse_move_timer) //clear old event timer
|
|
window.clearTimeout(this._mouse_move_timer);
|
|
|
|
//this event just inform about moving operation, we don't care about details
|
|
this.callEvent("onMouseMoving",[e]);
|
|
//set new event timer
|
|
this._mouse_move_timer = window.setTimeout(webix.bind(function(){
|
|
//called only when we have at least 100ms after previous event
|
|
if (e.type == "mousemove")
|
|
this._onMouseMove(e);
|
|
else
|
|
this._onMouseOut(e);
|
|
},this),(this._settings.mouseEventDelay||500));
|
|
},
|
|
|
|
//inner mousemove object handler
|
|
_onMouseMove: function(e) {
|
|
if (!this._mouseEvent(e,this.on_mouse_move,"MouseMove"))
|
|
this.callEvent("onMouseOut",[e||event]);
|
|
},
|
|
//inner mouseout object handler
|
|
_onMouseOut: function(e) {
|
|
this.callEvent("onMouseOut",[e||event]);
|
|
},
|
|
//common logic for click and dbl-click processing
|
|
_mouseEvent:function(e,hash,name, pair){
|
|
e=e||event;
|
|
|
|
if (e.processed || !this._viewobj) return;
|
|
e.processed = true;
|
|
|
|
var trg=e.target||e.srcElement;
|
|
|
|
//IE8 can't modify event object
|
|
//so we need to stop event bubbling to prevent double processing
|
|
if (webix.env.isIE8){
|
|
var vid = this._settings.id;
|
|
var wid = trg.w_view;
|
|
|
|
if (!wid) trg.w_view = vid; else if (wid !== vid) return;
|
|
}
|
|
|
|
var css = "";
|
|
var id = null;
|
|
var found = false;
|
|
//loop through all parents
|
|
while (trg && trg.parentNode && trg != this._viewobj.parentNode){
|
|
if (!found && trg.getAttribute){ //if element with ID mark is not detected yet
|
|
id = trg.getAttribute(this._id); //check id of current one
|
|
if (id){
|
|
this._item_clicked = id;
|
|
if (this.callEvent){
|
|
//it will be triggered only for first detected ID, in case of nested elements
|
|
if (!this.callEvent("on"+name,[id,e,trg])) return;
|
|
if (pair) this.callEvent("on"+pair,[id,e,trg]);
|
|
}
|
|
//set found flag
|
|
found = true;
|
|
}
|
|
}
|
|
css=webix.html._getClassName(trg);
|
|
if (css){ //check if pre-defined reaction for element's css name exists
|
|
css = css.toString().split(" ");
|
|
for (var i=0; i<css.length; i++){
|
|
if (hash[css[i]]){
|
|
var functor = webix.toFunctor(hash[css[i]], this.$scope);
|
|
var res = functor.call(this,e,id||webix.html.locate(e, this._id),trg);
|
|
if(res === false)
|
|
return found;
|
|
}
|
|
}
|
|
}
|
|
trg=trg.parentNode;
|
|
}
|
|
|
|
return found; //returns true if item was located and event was triggered
|
|
}
|
|
};
|
|
|
|
|
|
webix.protoUI({
|
|
name:"accordionitem",
|
|
$init:function(config){
|
|
this._viewobj.innerHTML = "<div webix_ai_id='"+config.id+"' class='webix_accordionitem_header'><div class='webix_accordionitem_button' ></div><div class='webix_accordionitem_label' ></div></div><div class='webix_accordionitem_body'></div>";
|
|
|
|
this._contentobj = this._viewobj;
|
|
this._headobj = this._contentobj.childNodes[0];
|
|
if(!config.header)
|
|
this._headobj.style.display = "none";
|
|
this._headlabel = this._contentobj.childNodes[0].childNodes[1];
|
|
this._headbutton = this._contentobj.childNodes[0].childNodes[0];
|
|
this._bodyobj = this._contentobj.childNodes[1];
|
|
this._viewobj.className +=" webix_accordionitem";
|
|
this._head_cell = this._body_cell = null;
|
|
this._cells = true;
|
|
},
|
|
_remove:function(){
|
|
this._body_cell = { destructor:function(){} };
|
|
},
|
|
_replace:function(new_view){
|
|
this._body_cell.destructor();
|
|
this._body_cell = new_view;
|
|
this._body_cell._parent_cell = this;
|
|
|
|
this._bodyobj.appendChild(this._body_cell._viewobj);
|
|
this.resize();
|
|
},
|
|
_id:"webix_ai_id",
|
|
getChildViews:function(){
|
|
return [this._body_cell];
|
|
},
|
|
body_setter:function(value){
|
|
if (typeof value != "object")
|
|
value = {template:value };
|
|
|
|
value._inner = { top:true, left:true, right:true, bottom:true};
|
|
this._body_cell = webix.ui._view(value);
|
|
this._body_cell.$view.style.border = "0px solid red";
|
|
this._body_cell._parent_cell = this;
|
|
|
|
this._bodyobj.appendChild(this._body_cell._viewobj);
|
|
return value;
|
|
},
|
|
header_setter:function(value){
|
|
if(value)
|
|
value = webix.template(value);
|
|
return value;
|
|
},
|
|
headerAlt_setter:function(value){
|
|
if(value)
|
|
value = webix.template(value);
|
|
return value;
|
|
},
|
|
$getSize:function(dx, dy){
|
|
var size = this._body_cell.$getSize(0, 0);
|
|
|
|
//apply external border to inner content sizes
|
|
var _borders = this._settings._inner;
|
|
if (_borders){
|
|
dx += (_borders.left?0:1)+(_borders.right?0:1);
|
|
dy += (_borders.top?0:1)+(_borders.bottom?0:1);
|
|
}
|
|
|
|
var header = 0;
|
|
var self_size = webix.ui.baseview.prototype.$getSize.call(this, 0, 0);
|
|
|
|
//use child settings if layout's one was not defined
|
|
self_size[0] = (self_size[0] || size[0] ) +dx;
|
|
if (self_size[1] >= 100000)
|
|
self_size[1] = size[1];
|
|
self_size[1] += dx;
|
|
|
|
self_size[2] = (self_size[2] || size[2] ) +dy;
|
|
var fixedHeight = (self_size[3]< 100000);
|
|
if (!fixedHeight)
|
|
self_size[3] = size[3];
|
|
|
|
self_size[3] += dy;
|
|
|
|
if(this.getParentView()._vertical_orientation){
|
|
if (this._settings.collapsed){
|
|
self_size[2] = self_size[3] = this._getHeaderSize();
|
|
} else if(this._settings.header)
|
|
header = this._settings.headerHeight;
|
|
} else {
|
|
if (this._settings.collapsed)
|
|
self_size[0] = self_size[1] = this._getHeaderSize();
|
|
if(this._settings.header)
|
|
header = this._settings.headerHeight;
|
|
}
|
|
|
|
//include header in total height calculation
|
|
if(!fixedHeight){
|
|
self_size[2] += header;
|
|
self_size[3] += header;
|
|
}
|
|
|
|
webix.debug_size_box(this, self_size, true);
|
|
return self_size;
|
|
},
|
|
on_click:{
|
|
webix_accordionitem_header:function(e, id){
|
|
this._toggle(e);
|
|
return false;
|
|
},
|
|
webix_accordionitem_header_v:function(e, id){
|
|
this._toggle(e);
|
|
return false;
|
|
}
|
|
},
|
|
_toggle:function(e){
|
|
this.define("collapsed", !this._settings.collapsed);
|
|
},
|
|
collapsed_setter:function(value){
|
|
if (this._settings.header === false) return;
|
|
//use last layout element if parent is not known yet
|
|
var parent = this.getParentView();
|
|
if(parent){
|
|
if(!value)
|
|
this._expand();
|
|
else{
|
|
if ( parent._canCollapse(this))
|
|
this._collapse();
|
|
else{
|
|
var success = 0;
|
|
if(parent._cells.length > 1)
|
|
for (var i=0; i < parent._cells.length; i++){
|
|
var sibl = parent._cells[i];
|
|
|
|
if (this != sibl && sibl.isVisible()){
|
|
sibl.expand();
|
|
this._collapse();
|
|
success = 1;
|
|
break;
|
|
}
|
|
}
|
|
if (!success) return;
|
|
}
|
|
}
|
|
|
|
this._settings.collapsed = value;
|
|
if (!value) parent._afterOpen(this);
|
|
|
|
this.refresh();
|
|
if (!webix._ui_creation)
|
|
this.resize();
|
|
|
|
parent.callEvent("onAfter"+(value?"Collapse":"Expand"), [this._settings.id]);
|
|
|
|
this._settings.$noresize = value;
|
|
}
|
|
return value;
|
|
},
|
|
collapse:function(){
|
|
this.define("collapsed", true);
|
|
webix.UIManager._moveChildFocus(this);
|
|
},
|
|
expand:function(){
|
|
this.define("collapsed", false);
|
|
},
|
|
_show: function() {
|
|
this.show();
|
|
},
|
|
_hide: function() {
|
|
this.hide();
|
|
},
|
|
_expand:function(){
|
|
this._bodyobj.style.display = "";
|
|
webix.html.removeCss(this.$view, "collapsed");
|
|
webix.html.removeCss(this._headobj, "collapsed");
|
|
},
|
|
_collapse:function(){
|
|
var vertical = this.getParentView()._vertical_orientation;
|
|
//this._original_size = (vertical?this._settings.height:this._settings.width)||-1;
|
|
|
|
if(this._settings.headerAlt)
|
|
this._headlabel.innerHTML = this._settings.headerAlt();
|
|
this._bodyobj.style.display = "none";
|
|
webix.html.addCss(this.$view, "collapsed");
|
|
webix.html.addCss(this._headobj, "collapsed");
|
|
},
|
|
refresh:function(){
|
|
var template = this._settings[this._settings.collapsed?"headerAlt":"header"] ||this._settings.header;
|
|
if (template)
|
|
this._headlabel.innerHTML = template();
|
|
var css = (this.getParentView()._vertical_orientation?"vertical":"horizontal");
|
|
if(this._viewobj.className.indexOf(" "+css) < 0 ){
|
|
webix.html.addCss(this._viewobj, css);
|
|
}
|
|
//fix collapsed columns in IE8
|
|
if(!webix.env.transform){
|
|
webix.html.addCss(this._viewobj,"webix_ie",true);
|
|
}
|
|
},
|
|
_getHeaderSize:function(){
|
|
return (this._settings.collapsed?this._settings.headerAltHeight:this._settings.headerHeight);
|
|
},
|
|
$setSize:function(x,y){
|
|
if (webix.ui.view.prototype.$setSize.call(this,x,y) || this._getHeaderSize() != this._last_set_header_size){
|
|
x = this._content_width;
|
|
y = this._content_height;
|
|
|
|
var headerSize = this._last_set_header_size = this._getHeaderSize();//-(this._settings._inner.top?0:1);
|
|
if (this._settings.header){
|
|
|
|
this._headobj.style.height=headerSize+"px";
|
|
this._headobj.style.width="auto";
|
|
this._headobj.style[webix.env.transform]="";
|
|
|
|
|
|
this._headobj.style.borderBottomWidth = (this._settings.collapsed?0:1)+"px";
|
|
|
|
if(this.getParentView()._vertical_orientation||!this._settings.collapsed){
|
|
y-=this._getHeaderSize();
|
|
} else if (this._settings.collapsed){
|
|
//-2 - borders
|
|
if (webix.animate.isSupported()){
|
|
this._headobj.style.width = y + "px";
|
|
this._headobj.style.height = x + 3 + "px";
|
|
var d = Math.floor(y/2-x/2)+(x-this._settings.headerAltHeight)/2;
|
|
this._headobj.style[webix.env.transform]="rotate(90deg) translate("+d+"px, "+(d+1)+"px)";
|
|
}
|
|
else { //IE8 fix
|
|
this._headobj.style.width = x + "px";
|
|
this._headobj.style.height = y + 3 + "px";
|
|
}
|
|
|
|
}
|
|
}
|
|
if(!this._settings.collapsed){
|
|
this._body_cell.$setSize(x,y);
|
|
this._last_size_y = y;
|
|
}
|
|
} else if (!this._settings.collapsed){
|
|
var body = this._body_cell;
|
|
if (this._last_size_y)
|
|
body.$setSize(this._content_width, this._last_size_y);
|
|
}
|
|
},
|
|
$skin:function(){
|
|
var defaults = this.defaults;
|
|
defaults.headerAltHeight = defaults.headerHeight = webix.skin.$active.barHeight;
|
|
if(webix.skin.$active.borderlessAccordion)
|
|
defaults.borderless = true;
|
|
},
|
|
defaults:{
|
|
header:false,
|
|
headerAlt:false,
|
|
body:""
|
|
}
|
|
}, webix.MouseEvents, webix.EventSystem, webix.ui.view);
|
|
|
|
webix.protoUI({
|
|
name:"accordion",
|
|
defaults:{
|
|
panelClass:"accordionitem",
|
|
multi:false,
|
|
collapsed:false
|
|
},
|
|
addView:function(view){
|
|
//adding view to the accordion
|
|
var id = webix.ui.layout.prototype.addView.apply(this, arguments);
|
|
var child = webix.$$(id);
|
|
//repainting sub-panels in the accordion
|
|
if (child.collapsed_setter && child.refresh) child.refresh();
|
|
return id;
|
|
},
|
|
_parse_cells:function(){
|
|
var panel = this._settings.panelClass;
|
|
var cells = this._collection;
|
|
|
|
for (var i=0; i<cells.length; i++){
|
|
if ((cells[i].body || cells[i].header)&& !cells[i].view)
|
|
cells[i].view = panel;
|
|
if (webix.isUndefined(cells[i].collapsed))
|
|
cells[i].collapsed = this._settings.collapsed;
|
|
|
|
}
|
|
|
|
|
|
this._skin_render_collapse = true;
|
|
webix.ui.layout.prototype._parse_cells.call(this);
|
|
this._skin_render_collapse = false;
|
|
|
|
for (var i=0; i < this._cells.length; i++){
|
|
if (this._cells[i].name == panel)
|
|
this._cells[i].refresh();
|
|
this._cells[i]._accLastChild = false;
|
|
}
|
|
var found = false;
|
|
for (var i= this._cells.length-1; i>=0 &&!found; i--){
|
|
if(!this._cells[i]._settings.hidden){
|
|
this._cells[i]._accLastChild = true;
|
|
found = true;
|
|
}
|
|
}
|
|
|
|
},
|
|
_afterOpen:function(view){
|
|
if (this._settings.multi === false && this._skin_render_collapse !== true){
|
|
for (var i=0; i < this._cells.length; i++) {
|
|
if (view != this._cells[i] && !this._cells[i]._settings.collapsed && this._cells[i].collapse)
|
|
this._cells[i].collapse();
|
|
}
|
|
}
|
|
},
|
|
_canCollapse:function(view){
|
|
if (this._settings.multi === true || this._skin_render_collapse) return true;
|
|
//can collapse only if you have other item to open
|
|
for (var i=0; i < this._cells.length; i++)
|
|
if (view != this._cells[i] && !this._cells[i]._settings.collapsed && this._cells[i].isVisible())
|
|
return true;
|
|
return false;
|
|
},
|
|
$skin:function(){
|
|
var defaults = this.defaults;
|
|
if(webix.skin.$active.accordionType)
|
|
defaults.type = webix.skin.$active.accordionType;
|
|
}
|
|
}, webix.ui.layout);
|
|
|
|
webix.protoUI({
|
|
name:"headerlayout",
|
|
defaults:{
|
|
type: "accordion",
|
|
multi:"mixed",
|
|
collapsed:false
|
|
}
|
|
}, webix.ui.accordion);
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
Behavior:DND - low-level dnd handling
|
|
@export
|
|
getContext
|
|
addDrop
|
|
addDrag
|
|
|
|
DND master can define next handlers
|
|
onCreateDrag
|
|
onDragIng
|
|
onDragOut
|
|
onDrag
|
|
onDrop
|
|
all are optional
|
|
*/
|
|
|
|
|
|
|
|
webix.DragControl={
|
|
//has of known dnd masters
|
|
_drag_masters : webix.toArray(["dummy"]),
|
|
/*
|
|
register drop area
|
|
@param node html node or ID
|
|
@param ctrl options dnd master
|
|
@param master_mode true if you have complex drag-area rules
|
|
*/
|
|
addDrop:function(node,ctrl,master_mode){
|
|
node = webix.toNode(node);
|
|
node.webix_drop=this._getCtrl(ctrl);
|
|
if (master_mode) node.webix_master=true;
|
|
},
|
|
//return index of master in collection
|
|
//it done in such way to prevent dnd master duplication
|
|
//probably useless, used only by addDrop and addDrag methods
|
|
_getCtrl:function(ctrl){
|
|
ctrl = ctrl||webix.DragControl;
|
|
var index = this._drag_masters.find(ctrl);
|
|
if (index<0){
|
|
index = this._drag_masters.length;
|
|
this._drag_masters.push(ctrl);
|
|
}
|
|
return index;
|
|
},
|
|
_createTouchDrag: function(e){
|
|
var dragCtrl = webix.DragControl;
|
|
var master = this._getActiveDragMaster();
|
|
// for data items only
|
|
if(master && master._getDragItemPos){
|
|
|
|
if(!dragCtrl._html)
|
|
dragCtrl.createDrag(e);
|
|
var 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";
|
|
}
|
|
},
|
|
/*
|
|
register drag area
|
|
@param node html node or ID
|
|
@param ctrl options dnd master
|
|
*/
|
|
addDrag:function(node,ctrl){
|
|
node = webix.toNode(node);
|
|
node.webix_drag=this._getCtrl(ctrl);
|
|
webix.event(node,webix.env.mouse.down,this._preStart,{bind:node});
|
|
webix.event(node,"dragstart",webix.html.preventEvent);
|
|
},
|
|
//logic of drag - start, we are not creating drag immediately, instead of that we hears mouse moving
|
|
_preStart:function(e){
|
|
if (webix.DragControl._active){
|
|
//if we have nested drag areas, use the top one and ignore the inner one
|
|
if (webix.DragControl._saved_event == e) return;
|
|
webix.DragControl._preStartFalse();
|
|
webix.DragControl.destroyDrag(e);
|
|
}
|
|
webix.DragControl._active=this;
|
|
|
|
var evobj = webix.env.mouse.context(e);
|
|
webix.DragControl._start_pos=evobj;
|
|
webix.DragControl._saved_event = e;
|
|
|
|
webix.DragControl._webix_drag_mm = webix.event(document.body,webix.env.mouse.move,webix.DragControl._startDrag);
|
|
webix.DragControl._webix_drag_mu = webix.event(document.body,webix.env.mouse.up,webix.DragControl._preStartFalse);
|
|
|
|
//need to run here, or will not work in IE
|
|
webix.html.addCss(document.body,"webix_noselect", 1);
|
|
},
|
|
//if mouse was released before moving - this is not a dnd, remove event handlers
|
|
_preStartFalse:function(){
|
|
webix.DragControl._clean_dom_after_drag();
|
|
},
|
|
//mouse was moved without button released - dnd started, update event handlers
|
|
_startDrag:function(e){
|
|
//prevent unwanted dnd
|
|
var pos = webix.env.mouse.context(e);
|
|
var master = webix.DragControl._getActiveDragMaster();
|
|
// only long-touched elements can be dragged
|
|
|
|
var longTouchLimit = (master && webix.env.touch && master._getDragItemPos && !webix.Touch._long_touched);
|
|
if (longTouchLimit || Math.abs(pos.x-webix.DragControl._start_pos.x)<5 && Math.abs(pos.y-webix.DragControl._start_pos.y)<5)
|
|
return;
|
|
|
|
webix.DragControl._clean_dom_after_drag(true);
|
|
if(!webix.DragControl._html)
|
|
if (!webix.DragControl.createDrag(webix.DragControl._saved_event)) return;
|
|
|
|
webix.DragControl.sendSignal("start"); //useless for now
|
|
webix.DragControl._webix_drag_mm = webix.event(document.body,webix.env.mouse.move,webix.DragControl._moveDrag);
|
|
webix.DragControl._webix_drag_mu = webix.event(document.body,webix.env.mouse.up,webix.DragControl._stopDrag);
|
|
webix.DragControl._moveDrag(e);
|
|
|
|
if (webix.env.touch)
|
|
return webix.html.preventEvent(e);
|
|
},
|
|
//mouse was released while dnd is active - process target
|
|
_stopDrag:function(e){
|
|
webix.DragControl._clean_dom_after_drag();
|
|
webix.DragControl._saved_event = null;
|
|
|
|
if (webix.DragControl._last){ //if some drop target was confirmed
|
|
webix.DragControl.$drop(webix.DragControl._active, webix.DragControl._last, e);
|
|
webix.DragControl.$dragOut(webix.DragControl._active,webix.DragControl._last,null,e);
|
|
}
|
|
webix.DragControl.destroyDrag(e);
|
|
webix.DragControl.sendSignal("stop"); //useless for now
|
|
},
|
|
_clean_dom_after_drag:function(still_drag){
|
|
this._webix_drag_mm = webix.eventRemove(this._webix_drag_mm);
|
|
this._webix_drag_mu = webix.eventRemove(this._webix_drag_mu);
|
|
if (!still_drag)
|
|
webix.html.removeCss(document.body,"webix_noselect");
|
|
},
|
|
//dnd is active and mouse position was changed
|
|
_moveDrag:function(e){
|
|
var dragCtrl = webix.DragControl;
|
|
var pos = webix.html.pos(e);
|
|
var evobj = webix.env.mouse.context(e);
|
|
|
|
//give possibility to customize drag position
|
|
var customPos = dragCtrl.$dragPos(pos, e);
|
|
//adjust drag marker position
|
|
var ctx = dragCtrl._drag_context;
|
|
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";
|
|
|
|
if (dragCtrl._skip)
|
|
dragCtrl._skip=false;
|
|
else {
|
|
var target = evobj.target = webix.env.touch ? document.elementFromPoint(evobj.x, evobj.y) : evobj.target;
|
|
var touch_event = webix.env.touch ? evobj : e;
|
|
dragCtrl._checkLand(target, touch_event);
|
|
}
|
|
|
|
return webix.html.preventEvent(e);
|
|
},
|
|
//check if item under mouse can be used as drop landing
|
|
_checkLand:function(node,e){
|
|
while (node && node.tagName!="BODY"){
|
|
if (node.webix_drop){ //if drop area registered
|
|
if (this._last && (this._last!=node || node.webix_master)) //if this area with complex dnd master
|
|
this.$dragOut(this._active,this._last,node,e); //inform master about possible mouse-out
|
|
if (!this._last || this._last!=node || node.webix_master){ //if this is new are or area with complex dnd master
|
|
this._last=null; //inform master about possible mouse-in
|
|
this._landing=this.$dragIn(webix.DragControl._active,node,e);
|
|
if (this._landing) //landing was rejected
|
|
this._last=node;
|
|
return;
|
|
}
|
|
return;
|
|
}
|
|
node=node.parentNode;
|
|
}
|
|
if (this._last) //mouse was moved out of previous landing, and without finding new one
|
|
this._last = this._landing = this.$dragOut(this._active,this._last,null,e);
|
|
},
|
|
//mostly useless for now, can be used to add cross-frame dnd
|
|
sendSignal:function(signal){
|
|
webix.DragControl.active=(signal=="start");
|
|
},
|
|
|
|
//return master for html area
|
|
getMaster:function(t){
|
|
return this._drag_masters[t.webix_drag||t.webix_drop];
|
|
},
|
|
//return dhd-context object
|
|
getContext:function(){
|
|
return this._drag_context;
|
|
},
|
|
getNode:function(){
|
|
return this._html;
|
|
},
|
|
//called when dnd is initiated, must create drag representation
|
|
createDrag:function(e){
|
|
var dragCtl = webix.DragControl;
|
|
var a=dragCtl._active;
|
|
|
|
dragCtl._drag_context = {};
|
|
var master = this._drag_masters[a.webix_drag];
|
|
var drag_container;
|
|
|
|
//if custom method is defined - use it
|
|
if (master.$dragCreate){
|
|
drag_container=master.$dragCreate(a,e);
|
|
if (!drag_container) return false;
|
|
this._setDragOffset(e);
|
|
drag_container.style.position = 'absolute';
|
|
} else {
|
|
//overvise use default one
|
|
var text = dragCtl.$drag(a,e);
|
|
dragCtl._setDragOffset(e);
|
|
|
|
if (!text) return false;
|
|
drag_container = document.createElement("DIV");
|
|
drag_container.innerHTML=text;
|
|
drag_container.className="webix_drag_zone";
|
|
document.body.appendChild(drag_container);
|
|
|
|
var context = dragCtl._drag_context;
|
|
if (context.html && webix.env.pointerevents){
|
|
context.x_offset = -Math.round(drag_container.offsetWidth * 0.5);
|
|
context.y_offset = -Math.round(drag_container.offsetHeight * 0.75);
|
|
}
|
|
}
|
|
/*
|
|
dragged item must have topmost z-index
|
|
in some cases item already have z-index
|
|
so we will preserve it if possible
|
|
*/
|
|
drag_container.style.zIndex = Math.max(drag_container.style.zIndex,webix.ui.zIndex());
|
|
|
|
webix.DragControl._skipDropH = webix.event(drag_container,webix.env.mouse.move,webix.DragControl._skip_mark);
|
|
|
|
if (!webix.DragControl._drag_context.from)
|
|
webix.DragControl._drag_context = {source:a, from:a};
|
|
|
|
webix.DragControl._html=drag_container;
|
|
return true;
|
|
},
|
|
//helper, prevents unwanted mouse-out events
|
|
_skip_mark:function(){
|
|
webix.DragControl._skip=true;
|
|
},
|
|
//after dnd end, remove all traces and used html elements
|
|
destroyDrag:function(e){
|
|
var a=webix.DragControl._active;
|
|
var master = this._drag_masters[a.webix_drag];
|
|
|
|
if (master && master.$dragDestroy){
|
|
webix.DragControl._skipDropH = webix.eventRemove(webix.DragControl._skipDropH);
|
|
if(webix.DragControl._html)
|
|
master.$dragDestroy(a,webix.DragControl._html,e);
|
|
}
|
|
else{
|
|
webix.html.remove(webix.DragControl._html);
|
|
}
|
|
webix.DragControl._landing=webix.DragControl._active=webix.DragControl._last=webix.DragControl._html=null;
|
|
//webix.DragControl._x_offset = webix.DragControl._y_offset = null;
|
|
},
|
|
_getActiveDragMaster: function(){
|
|
return webix.DragControl._drag_masters[webix.DragControl._active.webix_drag];
|
|
},
|
|
top:5, //relative position of drag marker to mouse cursor
|
|
left:5,
|
|
_setDragOffset:function(e){
|
|
var dragCtl = webix.DragControl;
|
|
var pos = dragCtl._start_pos;
|
|
var ctx = dragCtl._drag_context;
|
|
|
|
if(typeof ctx.x_offset != "undefined" && typeof ctx.y_offset != "undefined")
|
|
return null;
|
|
|
|
ctx.x_offset = ctx.y_offset = 0;
|
|
if(webix.env.pointerevents){
|
|
var m=webix.DragControl._getActiveDragMaster();
|
|
|
|
if (m._getDragItemPos && m!==this){
|
|
var itemPos = m._getDragItemPos(pos,e);
|
|
|
|
if(itemPos){
|
|
ctx.x_offset = itemPos.x - pos.x;
|
|
ctx.y_offset = itemPos.y - pos.y;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
},
|
|
$dragPos:function(pos, e){
|
|
var m=this._drag_masters[webix.DragControl._active.webix_drag];
|
|
if (m.$dragPos && m!=this){
|
|
m.$dragPos(pos, e, webix.DragControl._html);
|
|
return true;
|
|
}
|
|
},
|
|
//called when mouse was moved in drop area
|
|
$dragIn:function(s,t,e){
|
|
var m=this._drag_masters[t.webix_drop];
|
|
if (m.$dragIn && m!=this) return m.$dragIn(s,t,e);
|
|
t.className=t.className+" webix_drop_zone";
|
|
return t;
|
|
},
|
|
//called when mouse was moved out drop area
|
|
$dragOut:function(s,t,n,e){
|
|
var m=this._drag_masters[t.webix_drop];
|
|
if (m.$dragOut && m!=this) return m.$dragOut(s,t,n,e);
|
|
t.className=t.className.replace("webix_drop_zone","");
|
|
return null;
|
|
},
|
|
//called when mouse was released over drop area
|
|
$drop:function(s,t,e){
|
|
var m=this._drag_masters[t.webix_drop];
|
|
webix.DragControl._drag_context.from = webix.DragControl.getMaster(s);
|
|
if (m.$drop && m!=this) return m.$drop(s,t,e);
|
|
t.appendChild(s);
|
|
},
|
|
//called when dnd just started
|
|
$drag:function(s,e){
|
|
var m=this._drag_masters[s.webix_drag];
|
|
if (m.$drag && m!=this) return m.$drag(s,e);
|
|
return "<div style='"+s.style.cssText+"'>"+s.innerHTML+"</div>";
|
|
}
|
|
};
|
|
|
|
//global touch-drag handler
|
|
webix.attachEvent("onLongTouch", function(ev){
|
|
if(webix.DragControl._active)
|
|
webix.DragControl._createTouchDrag(ev);
|
|
});
|
|
|
|
/*
|
|
Behavior:DataMove - allows to move and copy elements, heavily relays on DataStore.move
|
|
@export
|
|
copy
|
|
move
|
|
*/
|
|
webix.DataMove={
|
|
//creates a copy of the item
|
|
copy:function(sid,tindex,tobj, details){
|
|
details = details || {};
|
|
var new_id = details.newId || sid;
|
|
tobj = tobj||this;
|
|
|
|
var data = this.getItem(sid);
|
|
webix.assert(data,"Incorrect ID in DataMove::copy");
|
|
|
|
//make data conversion between objects
|
|
if (tobj)
|
|
data = tobj._externalData(data);
|
|
|
|
//adds new element same as original
|
|
return tobj.data.add(tobj._externalData(data,new_id),tindex,(details.parent || 0));
|
|
},
|
|
_next_move_index:function(nid, next, source){
|
|
if (next && nid){
|
|
var new_index = this.getIndexById(nid);
|
|
return new_index+(source == this && source.getIndexById(next)<new_index?0:1);
|
|
}
|
|
},
|
|
//move item to the new position
|
|
move:function(sid,tindex,tobj, details){
|
|
details = details || {};
|
|
var new_id = details.newId || sid;
|
|
|
|
tobj = tobj||this;
|
|
webix.assert(tobj.data, "moving attempt to component without datastore");
|
|
if (!tobj.data) return;
|
|
|
|
//can process an arrya - it allows to use it from onDrag
|
|
if (webix.isArray(sid)){
|
|
//block separate repaint operations
|
|
if (sid.length > 3) //heuristic value, duplicated below
|
|
this.$blockRender = tobj.$blockRender = true;
|
|
|
|
for (var i=0; i < sid.length; i++) {
|
|
//increase index for each next item in the set, so order of insertion will be equal to order in the array
|
|
var nid = this.move(sid[i], tindex, tobj, details);
|
|
tindex = tobj._next_move_index(nid, sid[i+1], this);
|
|
}
|
|
|
|
this.$blockRender = tobj.$blockRender = false;
|
|
if (sid.length > 3){
|
|
//repaint whole component
|
|
this.refresh();
|
|
if (tobj != this)
|
|
tobj.refresh();
|
|
}
|
|
return;
|
|
}
|
|
|
|
var nid = sid; //id after moving
|
|
|
|
var data = this.getItem(sid);
|
|
webix.assert(data,"Incorrect ID in DataMove::move");
|
|
|
|
if (!tobj || tobj == this){
|
|
if (tindex < 0) tindex = this.data.order.length - 1;
|
|
this.data.move(this.getIndexById(sid),tindex); //move inside the same object
|
|
this.data.callEvent("onDataMove", [sid, tindex, null, this.data.order[tindex+1]]);
|
|
} else {
|
|
//copy to the new object
|
|
nid = tobj.data.add(tobj._externalData(data,new_id),tindex, (details.parent || 0));
|
|
this.data.remove(sid);//delete in old object
|
|
}
|
|
return nid; //return ID of item after moving
|
|
},
|
|
//move item on one position up
|
|
moveUp:function(id,step){
|
|
return this.move(id,this.getIndexById(id)-(step||1));
|
|
},
|
|
//move item on one position down
|
|
moveDown:function(id,step){
|
|
return this.moveUp(id, (step||1)*-1);
|
|
},
|
|
//move item to the first position
|
|
moveTop:function(id){
|
|
return this.move(id,0);
|
|
},
|
|
//move item to the last position
|
|
moveBottom:function(id){
|
|
return this.move(id,this.data.count()-1);
|
|
},
|
|
/*
|
|
this is a stub for future functionality
|
|
currently it just makes a copy of data object, which is enough for current situation
|
|
*/
|
|
_externalData:function(data,id){
|
|
var newdata = webix.extend({},data);
|
|
newdata.id = (!id || this.data.pull[id])?webix.uid():id;
|
|
|
|
|
|
newdata.$template=null;
|
|
|
|
if (this._settings.externalData)
|
|
newdata = this._settings.externalData.call(this, newdata, id);
|
|
return newdata;
|
|
}
|
|
};
|
|
|
|
|
|
webix.Movable = {
|
|
move_setter: function (value) {
|
|
if (value){
|
|
this._move_admin = webix.clone(this._move_admin);
|
|
this._move_admin.master = this;
|
|
|
|
webix.DragControl.addDrag(this._headobj, this._move_admin);
|
|
}
|
|
return value;
|
|
},
|
|
_move_admin: {
|
|
$dragCreate:function(object, e){
|
|
if(this.master.config.move){
|
|
var offset = webix.html.offset(object);
|
|
var pos = webix.html.pos(e);
|
|
webix.DragControl.top = offset.y - pos.y;
|
|
webix.DragControl.left = offset.x - pos.x;
|
|
|
|
return webix.toNode(this.master._viewobj);
|
|
}
|
|
},
|
|
$dragDestroy:function(node, drag){
|
|
var view = this.master;
|
|
if (view._settings){
|
|
view._settings.top = parseInt(drag.style.top,10);
|
|
view._settings.left = parseInt(drag.style.left,10);
|
|
}
|
|
|
|
webix.DragControl.top = webix.DragControl.left = 5;
|
|
this.master.callEvent("onViewMoveEnd", []);
|
|
return;
|
|
},
|
|
$dragPos:function(pos, e){
|
|
this.master.callEvent("onViewMove", [pos, e]);
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
|
|
webix.Modality = {
|
|
_modal_set:function(value){
|
|
if (value){
|
|
if (!this._modal_cover){
|
|
this._modal_cover = webix.html.create('div',{
|
|
"class":"webix_modal"
|
|
});
|
|
/* with below code we will have the same zIndex for modal layer as for the previous
|
|
abs positioned element, but because of attaching order modal layer will be on top anyway
|
|
*/
|
|
var zIndex = this._settings.zIndex||webix.ui.zIndex();
|
|
|
|
//set topmost modal layer
|
|
this._previous_modality = webix._modality;
|
|
webix._modality = zIndex;
|
|
|
|
|
|
this._modal_cover.style.zIndex = zIndex-1;
|
|
this._viewobj.style.zIndex = zIndex;
|
|
document.body.appendChild(this._modal_cover);
|
|
webix.event( this._modal_cover, "click", webix.bind(this._ignore_clicks, this));
|
|
}
|
|
}
|
|
else {
|
|
if (this._modal_cover){
|
|
webix.html.remove(this._modal_cover);
|
|
|
|
//restore topmost modal layer
|
|
//set delay, as current window closing may have not finished click event
|
|
//need to wait while it is not fully processed
|
|
var topmost = this._previous_modality;
|
|
setTimeout(function(){ webix._modality = topmost; }, 1);
|
|
|
|
this._modal_cover = null;
|
|
}
|
|
}
|
|
return value;
|
|
}
|
|
};
|
|
|
|
|
|
webix.protoUI({
|
|
name:"window",
|
|
|
|
$init:function(config){
|
|
this._viewobj.innerHTML = "<div class='webix_win_content'><div class='webix_win_head'></div><div class='webix_win_body'></div></div>";
|
|
|
|
this._contentobj = this._viewobj.firstChild;
|
|
this._headobj = this._contentobj.childNodes[0];
|
|
this._dataobj = this._bodyobj = this._contentobj.childNodes[1];
|
|
this._viewobj.className +=" webix_window";
|
|
|
|
this._head_cell = this._body_cell = null;
|
|
this._settings._inner = {top:false, left:false, right:false, bottom:false }; //set border flags
|
|
if (!config.id) config.id = webix.uid();
|
|
|
|
webix.event(this._contentobj, "click", webix.bind(this._ignore_clicks, this));
|
|
|
|
// IE8 does not allow to define event capturing
|
|
if(this._contentobj.addEventListener)
|
|
webix.event(this._contentobj, "click", function(){
|
|
// brings a window to the front of other windows
|
|
if(!this._settings.zIndex && this._settings.toFront){
|
|
this._viewobj.style.zIndex = webix.ui.zIndex();
|
|
}
|
|
}, {bind:this, capture: true});
|
|
|
|
// hidden_setter handling
|
|
if(config.modal)
|
|
this._modal = true;
|
|
},
|
|
_ignore_clicks:function(e){
|
|
var popups = webix.ui._popups;
|
|
var index = popups.find(this);
|
|
if (index == -1)
|
|
index = popups.length - 1;
|
|
|
|
e.click_view = index;
|
|
if (webix.env.isIE8)
|
|
e.srcElement.click_view = index;
|
|
},
|
|
getChildViews:function(){
|
|
if (this._head_cell)
|
|
return [this._head_cell, this._body_cell];
|
|
else
|
|
return [this._body_cell];
|
|
},
|
|
zIndex_setter:function(value){
|
|
this._viewobj.style.zIndex = value;
|
|
return value;
|
|
},
|
|
_remove:function(){
|
|
this._body_cell = { destructor:function(){} };
|
|
},
|
|
_replace:function(new_view){
|
|
this._body_cell.destructor();
|
|
this._body_cell = new_view;
|
|
this._body_cell._parent_cell = this;
|
|
|
|
this._bodyobj.appendChild(this._body_cell._viewobj);
|
|
|
|
var cell = this._body_cell._viewobj.style;
|
|
cell.borderTopWidth = cell.borderBottomWidth = cell.borderLeftWidth = cell.borderRightWidth = "1px";
|
|
this._body_cell._settings._inner = webix.clone(this._settings._inner);
|
|
|
|
this.resize(true);
|
|
},
|
|
show:function(node, mode, point){
|
|
if(!this.callEvent("onBeforeShow",arguments))
|
|
return false;
|
|
|
|
this._settings.hidden = false;
|
|
this._viewobj.style.zIndex = (this._settings.zIndex||webix.ui.zIndex());
|
|
if (this._settings.modal || this._modal){
|
|
this._modal_set(true);
|
|
this._modal = null; // hidden_setter handling
|
|
}
|
|
|
|
var pos, dx, dy;
|
|
mode = mode || {};
|
|
if (!mode.pos)
|
|
mode.pos = this._settings.relative;
|
|
|
|
//get position of source html node
|
|
//we need to show popup which pointing to that node
|
|
if (node){
|
|
//if event was provided - get node info from it
|
|
if (typeof node == "object" && !node.tagName){
|
|
/*below logic is far from ideal*/
|
|
if (node.target || node.srcElement){
|
|
pos = webix.html.pos(node);
|
|
dx = 20;
|
|
dy = 5;
|
|
} else
|
|
pos = node;
|
|
|
|
|
|
} else {
|
|
node = webix.toNode(node);
|
|
webix.assert(node,"Not existing target for window:show");
|
|
pos = webix.html.offset(node);
|
|
}
|
|
|
|
//size of body, we need to fit popup inside
|
|
var x = Math.max(window.innerWidth || 0, document.body.offsetWidth);
|
|
var y = Math.max(window.innerHeight || 0, document.body.offsetHeight);
|
|
|
|
//size of node, near which popup will be rendered
|
|
dx = dx || node.offsetWidth || 0;
|
|
dy = dy || node.offsetHeight || 0;
|
|
//size of popup element
|
|
var size = this._last_size;
|
|
|
|
var fin_x = pos.x;
|
|
var fin_y = pos.y;
|
|
var point_y=0;
|
|
var point_x = 0;
|
|
|
|
if (this._settings.autofit){
|
|
var delta_x = 6; var delta_y=6; var delta_point = 6;
|
|
|
|
//default pointer position - top
|
|
point = "top";
|
|
fin_y=0; fin_x = 0;
|
|
//if we want to place menu at righ, but there is no place move it to left instead
|
|
if (x - pos.x - dx < size[0] && mode.pos == "right")
|
|
mode.pos = "left";
|
|
|
|
if (mode.pos == "right"){
|
|
fin_x = pos.x+delta_x+dx;
|
|
delta_y = -dy;
|
|
point = "left";
|
|
point_y = Math.round(pos.y+dy/2);
|
|
point_x = fin_x - delta_point;
|
|
} else if (mode.pos == "left"){
|
|
fin_x = pos.x-delta_x-size[0]-1;
|
|
delta_y = -dy;
|
|
point = "right";
|
|
point_y = Math.round(pos.y+dy/2);
|
|
point_x = fin_x + size[0]+1;
|
|
} else {
|
|
//left border of screen
|
|
if (pos.x < 0){
|
|
fin_x = 0;
|
|
//popup exceed the right border of screen
|
|
} else if (x-pos.x > size[0]){
|
|
fin_x = pos.x; //aligned
|
|
} else{
|
|
fin_x = x-delta_x-size[0]; //not aligned
|
|
}
|
|
|
|
point_x = Math.round(pos.x+dx/2);
|
|
//when we have a small popup, point need to be rendered at center of popup
|
|
if (point_x > fin_x + size[0])
|
|
point_x = fin_x + size[0]/2;
|
|
}
|
|
|
|
//if height is not fixed - use default position
|
|
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
|
if ((!size[1] || (y+scrollTop-dy-pos.y-delta_y > size[1])) && mode.pos != "top"){
|
|
//bottom
|
|
fin_y = dy+pos.y+delta_y - 4;
|
|
if (!point_y){
|
|
point = "top";
|
|
point_y = fin_y-delta_point;
|
|
}
|
|
} else {
|
|
//top
|
|
fin_y = pos.y-delta_y - size[1];
|
|
if (fin_y < 0){
|
|
fin_y = 0;
|
|
//left|right point can be used, but there is no place for top point
|
|
if (point == "top") point = false;
|
|
} else if (!point_y){
|
|
point = "bottom";
|
|
fin_y --;
|
|
point_y = fin_y+size[1]+1;
|
|
}
|
|
}
|
|
}
|
|
|
|
var deltax = (mode.x || 0);
|
|
var deltay = (mode.y || 0);
|
|
this.setPosition(fin_x+deltax, fin_y+deltay);
|
|
if (this._set_point){
|
|
if (point)
|
|
this._set_point(point,point_x+deltax, point_y+deltay);
|
|
else
|
|
this._hide_point();
|
|
}
|
|
} else if (this._settings.position)
|
|
this._setPosition();
|
|
|
|
this._viewobj.style.display = "block";
|
|
this._hide_timer = 1;
|
|
webix.delay(function(){ this._hide_timer = 0; }, this, [], (webix.env.touch ? 400 : 100 ));
|
|
|
|
this._render_hidden_views();
|
|
|
|
|
|
if (this.config.autofocus){
|
|
this._prev_focus = webix.UIManager.getFocus();
|
|
webix.UIManager.setFocus(this);
|
|
}
|
|
|
|
if (-1 == webix.ui._popups.find(this))
|
|
webix.ui._popups.push(this);
|
|
|
|
this.callEvent("onShow",[]);
|
|
},
|
|
_hide:function(e){
|
|
//do not hide modal windows
|
|
if (this._settings.hidden || this._settings.modal || this._hide_timer || (e && e.showpopup)) return;
|
|
//do not hide popup, when we have modal layer above the popup
|
|
if (webix._modality && this._settings.zIndex <= webix._modality) return;
|
|
|
|
//ignore inside clicks and clicks in child-popups
|
|
|
|
if (e){
|
|
var index = webix.env.isIE8 ? e.srcElement.click_view : e.click_view;
|
|
if (!index && index !== 0) index = -1;
|
|
|
|
var myindex = webix.ui._popups.find(this);
|
|
|
|
if (myindex <= index) return;
|
|
}
|
|
|
|
this.hide();
|
|
},
|
|
hidden_setter:function(value){
|
|
if(value)
|
|
this.hide();
|
|
else
|
|
this.show();
|
|
return !!value;
|
|
},
|
|
hide:function(force){
|
|
if (this.$destructed) return;
|
|
|
|
if (!force)
|
|
if(this._settings.hidden) return;
|
|
|
|
if (this._settings.modal)
|
|
this._modal_set(false);
|
|
|
|
if (this._settings.position == "top"){
|
|
webix.animate(this._viewobj, {type: 'slide', x:0, y:-(this._content_height+20), duration: 300,
|
|
callback:this._hide_callback, bind:this});
|
|
}
|
|
else
|
|
this._hide_callback();
|
|
|
|
if (this._settings.autofocus){
|
|
var el = document.activeElement;
|
|
//as result of hotkey, we can have a activeElement set to document.body
|
|
if (el && this._viewobj && (this._viewobj.contains(el) || el === document.body)){
|
|
webix.UIManager.setFocus(this._prev_focus);
|
|
this._prev_focus = null;
|
|
}
|
|
}
|
|
|
|
this._hide_sub_popups();
|
|
},
|
|
//hide all child-popups
|
|
_hide_sub_popups:function(){
|
|
var order = webix.ui._popups;
|
|
var index = order.find(this);
|
|
var size = order.length - 1;
|
|
|
|
if (index > -1)
|
|
for (var i = size; i > index; i--)
|
|
if (order[i]._hide_point) //hide only popups, skip windows
|
|
order[i].hide();
|
|
|
|
order.removeAt(index);
|
|
},
|
|
destructor: function() {
|
|
this._modal_set(false);
|
|
webix.html.remove(this._viewobj);
|
|
|
|
if (this._settings.autofocus){
|
|
if (!webix._final_destruction)
|
|
webix.UIManager.setFocus(this._prev_focus);
|
|
this._prev_focus = null;
|
|
}
|
|
|
|
this._hide_sub_popups();
|
|
if (this._hide_point)
|
|
this._hide_point();
|
|
webix.Destruction.destructor.apply(this, []);
|
|
},
|
|
_hide_callback:function(){
|
|
if (!this.$destructed){
|
|
this._viewobj.style.display = "none";
|
|
this._settings.hidden = true;
|
|
this.callEvent("onHide",[]);
|
|
}
|
|
},
|
|
close:function(){
|
|
this.destructor();
|
|
},
|
|
_inner_body_set:function(value){
|
|
value.borderless = true;
|
|
},
|
|
body_setter:function(value){
|
|
if (typeof value != "object")
|
|
value = {template:value };
|
|
this._inner_body_set(value);
|
|
|
|
webix._parent_cell = this;
|
|
this._body_cell = webix.ui._view(value);
|
|
this._body_cell._parent_cell = this;
|
|
|
|
this._bodyobj.appendChild(this._body_cell._viewobj);
|
|
return value;
|
|
},
|
|
head_setter:function(value){
|
|
if (value === false) return value;
|
|
if (typeof value != "object")
|
|
value = { template:value, padding:0 };
|
|
|
|
value.borderless = true;
|
|
|
|
webix._parent_cell = this;
|
|
this._head_cell = webix.ui._view(value);
|
|
this._head_cell._parent_cell = this;
|
|
|
|
this._headobj.appendChild(this._head_cell._viewobj);
|
|
return value;
|
|
},
|
|
getBody:function(){
|
|
return this._body_cell;
|
|
},
|
|
getHead:function(){
|
|
return this._head_cell;
|
|
},
|
|
adjust:function(){ return this.resize(); },
|
|
resizeChildren:function(){
|
|
if (this._body_cell)
|
|
this.resize();
|
|
},
|
|
resize:function(){
|
|
webix.ui.baseview.prototype.adjust.call(this);
|
|
this._setPosition(this._settings.left, this._settings.top);
|
|
},
|
|
_setPosition:function(x,y){
|
|
if (this._settings.position){
|
|
this.$view.style.position = "fixed";
|
|
|
|
var width = this._content_width;
|
|
var height = this._content_height;
|
|
webix.assert(width && height, "Attempt to show not rendered window");
|
|
|
|
var maxWidth = (window.innerWidth||document.documentElement.offsetWidth);
|
|
var maxHeight = (window.innerHeight||document.documentElement.offsetHeight);
|
|
var left = Math.round((maxWidth-width)/2);
|
|
var top = Math.round((maxHeight-height)/2);
|
|
|
|
if (typeof this._settings.position == "function"){
|
|
var state = { left:left, top:top,
|
|
width:width, height:height,
|
|
maxWidth:maxWidth, maxHeight:maxHeight };
|
|
this._settings.position.call(this, state);
|
|
if (state.width != width || state.height != height)
|
|
this.$setSize(state.width, state.height);
|
|
|
|
this.setPosition(state.left, state.top);
|
|
} else {
|
|
if (this._settings.position == "top"){
|
|
if (webix.animate.isSupported())
|
|
top = -1*height;
|
|
else
|
|
top = 10;
|
|
}
|
|
this.setPosition(left, top);
|
|
}
|
|
|
|
if (this._settings.position == "top")
|
|
webix.animate(this._viewobj, {type: 'slide', x:0, y:height-((this._settings.padding||0)*2), duration: 300 ,callback:this._topPositionCallback, bind:this});
|
|
} else
|
|
this.setPosition(x,y);
|
|
},
|
|
_topPositionCallback:function(node){
|
|
webix.animate.clear(node);
|
|
this._settings.top=-((this._settings.padding||0)*2);
|
|
this.setPosition(this._settings.left, this._settings.top);
|
|
},
|
|
setPosition:function(x,y){
|
|
this._viewobj.style.top = y+"px";
|
|
this._viewobj.style.left = x+"px";
|
|
this._settings.left = x; this._settings.top=y;
|
|
},
|
|
$getSize:function(dx, dy){
|
|
var _borders = this._settings._inner;
|
|
if (_borders){
|
|
dx += (_borders.left?0:1)+(_borders.right?0:1);
|
|
dy += (_borders.top?0:1)+(_borders.bottom?0:1);
|
|
}
|
|
//line between head and body
|
|
if (this._settings.head)
|
|
dy += 1;
|
|
|
|
var size = this._body_cell.$getSize(0,0);
|
|
if (this._head_cell){
|
|
var head_size = this._head_cell.$getSize(0,0);
|
|
if (head_size[3]==head_size[2])
|
|
this._settings.headHeight = head_size[3];
|
|
dy += this._settings.headHeight;
|
|
}
|
|
|
|
if (this._settings.fullscreen){
|
|
var width = window.innerWidth || document.body.clientWidth;
|
|
var height = window.innerHeight || document.body.clientHeight;
|
|
return [width, width, height, height];
|
|
}
|
|
|
|
//get layout sizes
|
|
var self_size = webix.ui.view.prototype.$getSize.call(this, 0, 0);
|
|
|
|
//use child settings if layout's one was not defined
|
|
self_size[1] = Math.min(self_size[1],(size[1]>=100000&&self_size[1]>=100000?Math.max(size[0], 300):size[1])+dx);
|
|
self_size[3] = Math.min(self_size[3],(size[3]>=100000&&self_size[3]>=100000?Math.max(size[2], 200):size[3])+dy);
|
|
|
|
self_size[0] = Math.min(Math.max(self_size[0],size[0] + dx), self_size[1]);
|
|
self_size[2] = Math.min(Math.max(self_size[2],size[2] + dy), self_size[3]);
|
|
|
|
return self_size;
|
|
},
|
|
$setSize:function(x,y){
|
|
webix.ui.view.prototype.$setSize.call(this,x,y);
|
|
x = this._content_width;
|
|
y = this._content_height;
|
|
if (this._settings.head === false) {
|
|
this._headobj.style.display="none";
|
|
this._body_cell.$setSize(x,y);
|
|
} else {
|
|
this._head_cell.$setSize(x,this._settings.headHeight);
|
|
this._body_cell.$setSize(x,y-this._settings.headHeight);
|
|
}
|
|
},
|
|
$skin:function(){
|
|
this.defaults.headHeight = webix.skin.$active.barHeight;
|
|
},
|
|
defaults:{
|
|
top:0,
|
|
left:0,
|
|
autofit:true,
|
|
relative:"bottom",
|
|
body:"",
|
|
head:"",
|
|
hidden: true,
|
|
autofocus:true
|
|
}
|
|
}, webix.ui.view, webix.Movable, webix.Modality, webix.EventSystem);
|
|
|
|
webix.protoUI({
|
|
name:"popup",
|
|
$init:function(){
|
|
this._settings.head = false;
|
|
this.$view.className += " webix_popup";
|
|
webix.attachEvent("onClick", webix.bind(this._hide, this));
|
|
this.attachEvent("onHide", this._hide_point);
|
|
},
|
|
close:function(){
|
|
webix.html.remove(this._point_element);
|
|
webix.ui.window.prototype.close.call(this);
|
|
},
|
|
$getSize:function(x,y){
|
|
return webix.ui.window.prototype.$getSize.call(this, x+this._settings.padding*2,y+this._settings.padding*2);
|
|
},
|
|
$setSize:function(x,y){
|
|
webix.ui.view.prototype.$setSize.call(this,x,y);
|
|
x = this._content_width-this._settings.padding*2;
|
|
y = this._content_height-this._settings.padding*2;
|
|
this._contentobj.style.padding = this._settings.padding+"px";
|
|
this._headobj.style.display="none";
|
|
this._body_cell.$setSize(x,y);
|
|
},
|
|
//redefine to preserve inner borders
|
|
_inner_body_set:function(){},
|
|
defaults:{
|
|
padding:8
|
|
},
|
|
head_setter:function(){
|
|
},
|
|
_set_point:function(mode, left, top){
|
|
this._hide_point();
|
|
document.body.appendChild(this._point_element = webix.html.create("DIV",{ "class":"webix_point_"+mode },""));
|
|
this._point_element.style.zIndex = webix.ui.zIndex();
|
|
this._point_element.style.top = top+"px";
|
|
this._point_element.style.left = left+"px";
|
|
},
|
|
_hide_point:function(){
|
|
this._point_element = webix.html.remove(this._point_element);
|
|
}
|
|
}, webix.ui.window);
|
|
|
|
webix.ui._popups = webix.toArray();
|
|
|
|
webix.extend(webix.ui.window, {
|
|
resize_setter:function(value){
|
|
if (value && !this._resizeHandlers)
|
|
this._renderResizeHandler();
|
|
|
|
return value;
|
|
},
|
|
_renderResizeHandler: function(){
|
|
if(!this._rwHandle){
|
|
this._viewobj.firstChild.style.position = "relative";
|
|
this._rwHandle = webix.html.create("DIV",{
|
|
"class" : "webix_resize_handle"
|
|
});
|
|
this._viewobj.firstChild.appendChild(this._rwHandle);
|
|
webix.event(this._rwHandle, webix.env.mouse.down, this._wrDown, {bind:this});
|
|
}
|
|
},
|
|
_showResizeFrame: function(width,height){
|
|
if(!this._resizeFrame){
|
|
this._resizeFrame = webix.html.create("div", {"class":"webix_resize_frame"},"");
|
|
document.body.appendChild(this._resizeFrame);
|
|
var pos = webix.html.offset(this._viewobj);
|
|
this._resizeFrame.style.left = pos.x+"px";
|
|
this._resizeFrame.style.top = pos.y+"px";
|
|
this._resizeFrame.style.zIndex = webix.ui.zIndex();
|
|
}
|
|
|
|
this._resizeFrame.style.width = width + "px";
|
|
this._resizeFrame.style.height = height + "px";
|
|
},
|
|
_wrDown:function(e){
|
|
if (this.config.resize){
|
|
webix.html.addCss(document.body,"webix_noselect webix_resize_cursor");
|
|
this._wsReady = webix.html.offset(this._viewobj);
|
|
|
|
this._resizeHandlersMove = webix.event(document.body, webix.env.mouse.move, this._wrMove, {bind:this});
|
|
this._resizeHandlersUp = webix.event(document.body, webix.env.mouse.up, this._wrUp, {bind:this});
|
|
}
|
|
},
|
|
_wrMove:function(e){
|
|
if (this._wsReady !== false){
|
|
var pos = webix.html.pos(e);
|
|
var progress = {x:pos.x - this._wsReady.x+10, y: pos.y - this._wsReady.y+10};
|
|
|
|
if (Math.abs(this._wsReady.x - pos.x) < (this.config.minWidth||100) || Math.abs(this._wsReady.y - pos.y) < (this.config.maxHeight||100))
|
|
return;
|
|
|
|
this._wsProgress = progress;
|
|
this._showResizeFrame(progress.x,progress.y);
|
|
}
|
|
},
|
|
_wrUp:function(){
|
|
// remove resize frame and css styles
|
|
if (this._resizeFrame)
|
|
this._resizeFrame = webix.html.remove(this._resizeFrame);
|
|
|
|
webix.html.removeCss(document.body,"webix_resize_cursor");
|
|
webix.html.removeCss(document.body,"webix_noselect");
|
|
webix.eventRemove(this._resizeHandlersMove);
|
|
webix.eventRemove(this._resizeHandlersUp);
|
|
|
|
// set Window sizes
|
|
if (this._wsProgress){
|
|
this.config.width = this._wsProgress.x;
|
|
this.config.height = this._wsProgress.y;
|
|
this.resize();
|
|
}
|
|
|
|
this._wsReady = this._wsProgress = false;
|
|
this.callEvent("onViewResize",[]);
|
|
}
|
|
});
|
|
|
|
|
|
webix.protoUI({
|
|
name:"suggest",
|
|
defaults:{
|
|
autofocus:false,
|
|
type:"list",
|
|
keyPressTimeout:1,
|
|
body:{
|
|
yCount:10,
|
|
autoheight:true,
|
|
body:true,
|
|
select:true,
|
|
borderless:true,
|
|
navigation:true
|
|
},
|
|
filter:function(item,value){
|
|
if (item.value.toString().toLowerCase().indexOf(value.toLowerCase())===0) return true;
|
|
return false;
|
|
}
|
|
},
|
|
template_setter:webix.template,
|
|
filter_setter:function(value){
|
|
return webix.toFunctor(value, this.$scope);
|
|
},
|
|
$init:function(obj){
|
|
var temp = {};
|
|
webix.extend(temp, webix.copy(this.defaults.body));
|
|
temp.view = obj.type || this.defaults.type;
|
|
|
|
var etemp = this._get_extendable_cell(temp);
|
|
if (obj.body)
|
|
webix.extend(etemp, obj.body, true);
|
|
|
|
if (obj.data)
|
|
etemp.data = obj.data;
|
|
if (obj.url)
|
|
etemp.url = obj.url;
|
|
if (obj.datatype)
|
|
etemp.datatype = obj.datatype;
|
|
|
|
if (obj.id)
|
|
temp.id = temp.id || (obj.id+"_"+temp.view);
|
|
|
|
obj.body = temp;
|
|
this.$ready.push(this._set_on_popup_click);
|
|
|
|
this.attachEvent("onShow", this._show_selection);
|
|
this._old_text = {};
|
|
},
|
|
_get_extendable_cell:function(obj){
|
|
return obj;
|
|
},
|
|
_preselectMasterOption: function(data){
|
|
if (data){
|
|
var master, node, text;
|
|
if (this._settings.master){
|
|
master = webix.$$(this._settings.master);
|
|
if (master.options_setter && (node = master.getInputNode())){
|
|
text = this.getItemText(data.id);
|
|
if (webix.isUndefined(node.value))
|
|
node.innerHTML = text;
|
|
else
|
|
node.value = text.replace(/<[^>]*>/g,"");
|
|
}
|
|
}
|
|
}
|
|
},
|
|
setMasterValue:function(data, refresh){
|
|
var text = data.id ? this.getItemText(data.id) : (data.text||data.value);
|
|
|
|
if (this._settings.master){
|
|
var master = webix.$$(this._settings.master);
|
|
if (refresh && data.id)
|
|
master.refresh();
|
|
else if (master.options_setter)
|
|
master.setValue(data.$empty?"":data.id);
|
|
else if(master.setValueHere)
|
|
master.setValueHere(text);
|
|
else
|
|
master.setValue(text);
|
|
} else if (this._last_input_target){
|
|
this._last_input_target.value = text;
|
|
}
|
|
|
|
if (!refresh){
|
|
this.hide(true);
|
|
if (this._last_input_target)
|
|
this._last_input_target.focus();
|
|
}
|
|
this.callEvent("onValueSuggest", [data, text]);
|
|
webix.delay(function(){
|
|
webix.callEvent("onEditEnd",[]);
|
|
});
|
|
},
|
|
getMasterValue:function(){
|
|
if (this._settings.master)
|
|
return webix.$$(this._settings.master).getValue();
|
|
return null;
|
|
},
|
|
getItemText:function(id){
|
|
var item = this.getList().getItem(id);
|
|
|
|
if (!item)
|
|
return this._old_text[id] || "";
|
|
|
|
if (this._settings.template)
|
|
return this._settings.template.call(this, item, this.type);
|
|
|
|
if (this._settings.textValue)
|
|
return item[this._settings.textValue];
|
|
|
|
var type = this.getList().type;
|
|
var text = type.template.call(type, item, type);
|
|
|
|
return (this._old_text[id] = text);
|
|
},
|
|
getSuggestion:function(){
|
|
var id,
|
|
list = this.getList(),
|
|
order = list.data.order;
|
|
|
|
if (list.getSelectedId)
|
|
id = list.getSelectedId();
|
|
|
|
if (order.length && (!id || order.find(id) <0) )
|
|
id = order[0];
|
|
|
|
//complex id in datatable
|
|
if (id && typeof id == "object") id = id+"";
|
|
return id;
|
|
},
|
|
getList:function(){
|
|
return this._body_cell;
|
|
},
|
|
_set_on_popup_click:function(){
|
|
var list = this.getList();
|
|
var type = this._settings.type;
|
|
if (list.count){
|
|
list.attachEvent("onItemClick", webix.bind(function(item){
|
|
this.setMasterValue(list.getItem(item));
|
|
}, this));
|
|
list.data.attachEvent("onstoreupdated",webix.bind(function(id, obj, mode){
|
|
if (mode == "delete" && id == this.getMasterValue())
|
|
this.setMasterValue({ id:"", text:"" }, 1);
|
|
else if (mode == "update" && id == this.getMasterValue()){
|
|
this.setMasterValue(obj, 1);
|
|
}
|
|
}, this));
|
|
list.data.attachEvent("onAfterFilter", webix.bind(this._suggest_after_filter, this));
|
|
list.data.attachEvent("onStoreLoad", webix.bind(this._suggest_after_filter, this));
|
|
if (webix.isUndefined(this._settings.fitMaster))
|
|
this._settings.fitMaster = true;
|
|
} else if (type == "calendar"){
|
|
list.attachEvent("onDateSelect", function(date){
|
|
this.getParentView().setMasterValue({ value:date});
|
|
});
|
|
list.attachEvent("onTodaySet", function(date){
|
|
this.getParentView().setMasterValue({ value:date});
|
|
});
|
|
list.attachEvent("onDateClear", function(date){
|
|
this.getParentView().setMasterValue({ value:date});
|
|
});
|
|
} else if (type == "colorboard"){
|
|
list.attachEvent("onSelect", function(value){
|
|
this.getParentView().setMasterValue({ value:value });
|
|
});
|
|
}
|
|
},
|
|
input_setter: function(value) {
|
|
this.linkInput(value);
|
|
return 0;
|
|
},
|
|
linkInput: function(input){
|
|
var node;
|
|
if (input.getInputNode){
|
|
node = input.getInputNode();
|
|
node.webix_master_id = input._settings.id;
|
|
} else
|
|
node = webix.toNode(input);
|
|
|
|
webix.event(node,"keydown",function(e){
|
|
if (node != document.body || this.isVisible())
|
|
this._suggestions(e);
|
|
},{bind:this, id: "webix_suggest_keydown_"+node.webix_master_id});
|
|
|
|
this._non_ui_mode = true;
|
|
},
|
|
_suggestions: function(e){
|
|
e = (e||event);
|
|
var list = this.getList();
|
|
|
|
var trg = e.target||e.srcElement;
|
|
|
|
this._last_input_target = trg;
|
|
this._settings.master = trg.webix_master_id;
|
|
|
|
window.clearTimeout(this._key_timer);
|
|
|
|
var code = e.keyCode;
|
|
//shift and ctrl
|
|
if (code == 16 || code == 17) return;
|
|
|
|
// tab - hide popup and do nothing
|
|
if (code == 9)
|
|
return this._tab_key(this,list);
|
|
|
|
// escape - hide popup
|
|
if (code == 27)
|
|
return this._escape_key(this,list);
|
|
|
|
// enter
|
|
if (code == 13)
|
|
return this._enter_key(this,list);
|
|
|
|
// up/down are used for navigation
|
|
if (this._navigate(e)) {
|
|
webix.html.preventEvent(e);
|
|
return false;
|
|
}
|
|
|
|
if (webix.isUndefined(trg.value)) return;
|
|
|
|
clearTimeout(this._last_delay);
|
|
this._last_delay = webix.delay(function(){
|
|
//focus moved to the different control, suggest is not necessary
|
|
if (!this._non_ui_mode &&
|
|
webix.UIManager.getFocus() != webix.$$(this._settings.master)) return;
|
|
|
|
this._resolve_popup = true;
|
|
//for multicombo
|
|
var val = trg.value;
|
|
|
|
// used to prevent showing popup when it was initialized
|
|
if (list.config.dataFeed)
|
|
list.filter("value", val);
|
|
else if (list.filter){
|
|
list.filter(webix.bind(function(item){
|
|
return this._settings.filter.call(this,item,val);
|
|
}, this));
|
|
}
|
|
},this, [], this._settings.keyPressTimeout);
|
|
},
|
|
_suggest_after_filter: function() {
|
|
if (!this._resolve_popup) return true;
|
|
this._resolve_popup = false;
|
|
|
|
var list = this.getList();
|
|
|
|
// filtering is complete
|
|
// if there are as min 1 variant it must be shown, hidden otherwise
|
|
if (list.count() >0){
|
|
this.adjust();
|
|
if(!this.isVisible())
|
|
this._dont_unfilter = true;
|
|
this.show(this._last_input_target,null,true);
|
|
this._dont_unfilter = false;
|
|
} else {
|
|
this.hide(true);
|
|
this._last_input_target = null;
|
|
}
|
|
},
|
|
|
|
show:function(node){
|
|
if (!this.isVisible()){
|
|
var list = this.getList();
|
|
if (list.filter && !this._dont_unfilter){
|
|
list.filter("");
|
|
this._show_selection(list);
|
|
}
|
|
|
|
if(this.$customWidth){
|
|
this.$customWidth(node);
|
|
}
|
|
if (node.tagName && this._settings.fitMaster){
|
|
this._settings.width = node.offsetWidth -2 ; //2 - borders
|
|
}
|
|
if (list._zoom_level)
|
|
list.render();
|
|
|
|
this.adjust();
|
|
|
|
// needed to return focus
|
|
if(node.tagName == "INPUT")
|
|
this._last_input_target = node;
|
|
}
|
|
webix.ui.popup.prototype.show.apply(this, arguments);
|
|
},
|
|
_show_selection:function(list){
|
|
list = list||this.getList();
|
|
if( list.select && list.showItem ){
|
|
var value = this.getMasterValue();
|
|
if (value && list.exists && list.exists(value)){
|
|
list.select(value);
|
|
list.showItem(value);
|
|
}
|
|
else{
|
|
list.unselect();
|
|
list.showItem(list.getFirstId());
|
|
}
|
|
}
|
|
},
|
|
_enter_key: function(popup,list) {
|
|
if (list.count && list.count()){
|
|
if (popup.isVisible()) {
|
|
var value = list.getSelectedId(false, true);
|
|
|
|
if(list.count()==1 && list.getFirstId()!=value){
|
|
value = list.getFirstId();
|
|
}
|
|
if (value)
|
|
this.setMasterValue(list.getItem(value));
|
|
|
|
popup.hide(true);
|
|
} else {
|
|
popup.show(this._last_input_target);
|
|
}
|
|
} else {
|
|
if (popup.isVisible())
|
|
popup.hide(true);
|
|
|
|
}
|
|
},
|
|
_escape_key: function(popup, list) {
|
|
return popup.hide(true);
|
|
},
|
|
_tab_key: function(popup, list) {
|
|
return popup.hide(true);
|
|
},
|
|
|
|
|
|
/*! suggestions navigation: up/down buttons move selection
|
|
* @param e
|
|
* event object
|
|
**/
|
|
_navigate: function(e) {
|
|
var list = this.getList();
|
|
var code = e.keyCode;
|
|
|
|
if(list.count && list.moveSelection) {
|
|
// up arrow
|
|
if (code === 38 && !e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey) {
|
|
|
|
list.moveSelection("up");
|
|
this._preselectMasterOption(list.getSelectedItem());
|
|
return true;
|
|
}
|
|
|
|
// down arrow
|
|
if (code === 40 && !e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey) {
|
|
var visible = this.isVisible();
|
|
if (!visible){
|
|
if (list.count())
|
|
this.show(this._last_input_target);
|
|
else return false;
|
|
}
|
|
|
|
|
|
var selected = list.getSelectedId();
|
|
if (!selected && list.count)
|
|
list.select(list.getFirstId());
|
|
else if (visible)
|
|
list.moveSelection("down");
|
|
this._preselectMasterOption(list.getSelectedItem());
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
getValue:function(){
|
|
var value = this.getList().getSelectedId() || "";
|
|
return value.id || value;
|
|
|
|
},
|
|
setValue:function(value){
|
|
var list = this.getList();
|
|
if(value){
|
|
if(list.exists(value)){
|
|
list.select(value);
|
|
list.showItem(value);
|
|
}
|
|
}else{
|
|
list.unselect();
|
|
list.showItem(list.getFirstId());
|
|
}
|
|
}
|
|
}, webix.ui.popup);
|
|
|
|
|
|
webix.attachEvent("onClick", function(e){
|
|
var element = webix.$$(e);
|
|
if (element && element.touchable){
|
|
webix.UIManager.applyChanges(element);
|
|
|
|
//for inline elements - restore pointer to the master element
|
|
element.getNode(e);
|
|
//reaction on custom css elements in buttons
|
|
var trg=e.target||e.srcElement;
|
|
if (trg.className == "webix_disabled")
|
|
return;
|
|
|
|
var css = "";
|
|
var id = null;
|
|
var found = false;
|
|
if (trg.className && trg.className.toString().indexOf("webix_view")===0) return;
|
|
|
|
if (element)
|
|
webix.UIManager._focus_action(element);
|
|
|
|
//loop through all parents
|
|
while (trg && trg.parentNode){
|
|
if (trg.getAttribute){
|
|
if (trg.getAttribute("view_id"))
|
|
break;
|
|
|
|
css=trg.className;
|
|
if (css){
|
|
css = css.toString().split(" ");
|
|
for (var i =0; i<css.length; i++){
|
|
if (element.on_click[css[i]]){
|
|
var res = element.on_click[css[i]].call(element,e,element._settings.id,trg);
|
|
if (res===false)
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
trg=trg.parentNode;
|
|
}
|
|
|
|
|
|
if (element._settings.click){
|
|
var code = webix.toFunctor(element._settings.click, element.$scope);
|
|
if (code && code.call) code.call(element, element._settings.id, e);
|
|
}
|
|
|
|
|
|
|
|
var popup = element._settings.popup;
|
|
if (element._settings.popup && !element._settings.readonly){
|
|
if (typeof popup == "object" && !popup.name)
|
|
popup = element._settings.popup = webix.ui(popup)._settings.id;
|
|
|
|
var popup = webix.$$(popup);
|
|
webix.assert(popup, "Unknown popup");
|
|
|
|
if (!popup.isVisible()){
|
|
popup._settings.master = element._settings.id;
|
|
popup.show((element.getInputNode()||element.getNode()),null,true);
|
|
}
|
|
}
|
|
|
|
element.callEvent("onItemClick", [element._settings.id, e]);
|
|
}
|
|
});
|
|
|
|
|
|
webix.protoUI({
|
|
name:"button",
|
|
touchable:true,
|
|
$skin:function(){
|
|
this.defaults.height = webix.skin.$active.buttonHeight||webix.skin.$active.inputHeight;
|
|
//used in "text"
|
|
this._labelTopHeight = webix.skin.$active.labelTopHeight||15;
|
|
},
|
|
defaults:{
|
|
template:function(obj, common){
|
|
var text = common.$renderInput(obj, common);
|
|
if (obj.badge) text = text.replace("</button>", "<span class='webix_badge'>"+obj.badge+"</span></button>");
|
|
return "<div class='webix_el_box' style='width:"+obj.awidth+"px; height:"+obj.aheight+"px'>"+ text + "</div>";
|
|
},
|
|
label:"",
|
|
tabFocus:true,
|
|
borderless:true
|
|
},
|
|
$renderInput:function(obj){
|
|
var css = "class='webixtype_"+(obj.type||"base")+"' ";
|
|
return "<button type='button' "+css+">"+webix.template.escape(obj.label||obj.value)+"</button>";
|
|
},
|
|
$init:function(config){
|
|
this._viewobj.className += " webix_control webix_el_"+(this.$cssName||this.name);
|
|
|
|
this.data = this._settings;
|
|
this._dataobj = this._viewobj;
|
|
|
|
this._calc_size(config);
|
|
},
|
|
hotkey_setter: function(key){
|
|
var control = this;
|
|
this._addElementHotKey(key, function(view,ev){
|
|
var elem = control.$view.firstChild;
|
|
if(elem.dispatchEvent){
|
|
var clickEvent = document.createEvent('MouseEvents');
|
|
clickEvent.initEvent('click', true, true);
|
|
ev.preventDefault();
|
|
elem.dispatchEvent(clickEvent);
|
|
}
|
|
});
|
|
},
|
|
|
|
_addElementHotKey: function(key, func, view){
|
|
var keyCode = webix.UIManager.addHotKey(key, func, view);
|
|
this.attachEvent("onDestruct", function(){
|
|
webix.UIManager.removeHotKey(keyCode, func, view);
|
|
});
|
|
},
|
|
tooltip_setter: function(value){
|
|
var box = this._getBox() || this.$view.firstChild;
|
|
if(box)
|
|
box.title = value;
|
|
return value;
|
|
},
|
|
type_setter:function(value){
|
|
if (this._types[value])
|
|
this.$renderInput = webix.template(this._types[value]);
|
|
if (value == 'prev' || value == 'next')
|
|
this._set_inner_size = this._set_inner_size_next;
|
|
else
|
|
this._set_inner_size = false;
|
|
return value;
|
|
},
|
|
_types:{
|
|
htmlbutton: "<button type='button' class='webix_el_htmlbutton webixtype_base'>#label#</button>",
|
|
|
|
prev:"<input type='button' class='webixtype_prev' value='#label#' /><div class='webix_el_arrow webixtype_prev_arrow'></div>",
|
|
next:"<input type='button' class='webixtype_next' value='#label#' /><div class='webix_el_arrow webixtype_next_arrow'></div>",
|
|
|
|
imageButton:"<button type='button' class='webix_img_btn_abs webixtype_base' style='width:100%; line-height:#cheight#px'><div class='webix_image' style='width:#dheight#px;height:#dheight#px;background-image:url(#image#);'> </div> #label#</button>",
|
|
imageButtonTop:"<button type='button' class='webix_img_btn_abs webix_img_btn_abs_top webixtype_base'><div class='webix_image' style='width:100%;height:100%;background-image:url(#image#);'> </div> <div class='webix_img_btn_text'>#label#</div></button>",
|
|
|
|
image:"<button type='button' class='webix_img_btn' style='line-height:#cheight#px;'><div class='webix_image' style='width:#cheight#px;height:#cheight#px;background-image:url(#image#);'> </div> #label#</button>",
|
|
imageTop:"<button type='button' class='webix_img_btn_top' style='background-image:url(#image#);'><div class='webix_img_btn_text'>#label#</div></button>",
|
|
|
|
icon:"<button type='button' class='webix_img_btn' style='line-height:#cheight#px;'><span class='webix_icon_btn fa-#icon#' style='max-width:#cheight#px;'></span>#label#</button>",
|
|
iconButton:"<button type='button' class='webix_img_btn_abs webixtype_base' style='width:100%;'><span class='webix_icon fa-#icon#'></span> #label#</button>",
|
|
iconTop:"<button type='button' class='webix_img_btn_top' style='width:100%;top:4px;text-align:center;'><span class='webix_icon fa-#icon#'></span><div class='webix_img_btn_text'>#label#</div></button>",
|
|
iconButtonTop:"<button type='button' class='webix_img_btn_abs webix_img_btn_abs_top webixtype_base' style='width:100%;top:0px;text-align:center;'><span class='webix_icon fa-#icon#'></span><div class='webix_img_btn_text'>#label#</div></button>"
|
|
|
|
},
|
|
_findAllInputs: function(){
|
|
var result = [];
|
|
var tagNames = ["input","select","textarea","button"];
|
|
for(var i=0; i< tagNames.length; i++){
|
|
var inputs = this.$view.getElementsByTagName(tagNames[i]);
|
|
for(var j = 0; j< inputs.length; j++){
|
|
result.push(inputs[j]);
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
disable: function(){
|
|
var i,
|
|
elem = this._getBox();
|
|
webix.ui.baseview.prototype.disable.apply(this, arguments);
|
|
if(elem && elem.className.indexOf(" webix_disabled_box")== -1){
|
|
elem.className += " webix_disabled_box";
|
|
var inputs = this._findAllInputs();
|
|
for(i=0; i< inputs.length; i++)
|
|
inputs[i].setAttribute("disabled",true);
|
|
|
|
if(this._settings.labelPosition == "top"){
|
|
var label = this._dataobj.firstChild;
|
|
if(label)
|
|
label.className += " webix_disabled_top_label";
|
|
}
|
|
}
|
|
},
|
|
enable: function(){
|
|
webix.ui.baseview.prototype.enable.apply(this, arguments);
|
|
var elem = this._getBox();
|
|
if(elem){
|
|
elem.className = elem.className.replace(" webix_disabled_box","");
|
|
var inputs = this._findAllInputs();
|
|
for(var i=0; i< inputs.length; i++)
|
|
inputs[i].removeAttribute("disabled");
|
|
|
|
if(this._settings.labelPosition == "top"){
|
|
var label = this._dataobj.firstChild;
|
|
if(label)
|
|
label.className = label.className.replace(" webix_disabled_top_label","");
|
|
}
|
|
}
|
|
},
|
|
$setSize:function(x,y){
|
|
if(webix.ui.view.prototype.$setSize.call(this,x,y)){
|
|
this.render();
|
|
}
|
|
},
|
|
setValue:function(value){
|
|
var oldvalue = this._settings.value;
|
|
if (oldvalue == value) return false;
|
|
|
|
this._settings.value = value;
|
|
|
|
if (this._rendered_input)
|
|
this.$setValue(value);
|
|
|
|
this.callEvent("onChange", [value, oldvalue]);
|
|
},
|
|
//visual part of setValue
|
|
$setValue:function(value){
|
|
// this._settings.label = value;
|
|
(this.getInputNode()||{}).value = value;
|
|
},
|
|
getValue:function(){
|
|
//if button was rendered - returning actual value
|
|
//otherwise - returning last set value
|
|
var value = this._rendered_input? this.$getValue() : this._settings.value;
|
|
return (typeof value == "undefined") ? "" : value;
|
|
},
|
|
$getValue:function(){
|
|
return this._settings.value||"";
|
|
},
|
|
focus:function(){
|
|
var input = this.getInputNode();
|
|
if (input && input.focus) input.focus();
|
|
},
|
|
blur:function() {
|
|
var input = this.getInputNode();
|
|
if (input && input.blur) input.blur();
|
|
},
|
|
//get input element
|
|
getInputNode: function() {
|
|
return this._dataobj.getElementsByTagName('input')[0]||this._dataobj.getElementsByTagName('button')[0];
|
|
},
|
|
//get top-level sub-container
|
|
_getBox:function(){
|
|
for(var i=0;i< this._dataobj.childNodes.length;i++){
|
|
if(this._dataobj.childNodes[i].className.indexOf("webix_el_box")>=0)
|
|
return this._dataobj.childNodes[i];
|
|
}
|
|
return null;
|
|
},
|
|
_sqrt_2:Math.sqrt(2),
|
|
_set_inner_size_next:function(){
|
|
var cfg = this._settings;
|
|
var arrow = this._getBox().childNodes[1];
|
|
var button = arrow.previousSibling;
|
|
var style = cfg.type == "next"?"right":"left";
|
|
var height = cfg.aheight-webix.skin.$active.inputPadding*2-2; //-2 - borders
|
|
|
|
var arrowEdge = height*this._sqrt_2/2;
|
|
arrow.style.width = arrowEdge+"px";
|
|
arrow.style.height = arrowEdge+"px";
|
|
arrow.style.top = (height - arrowEdge)/2 + webix.skin.$active.inputPadding+ "px";
|
|
arrow.style[style] = (height - arrowEdge)/2 +this._sqrt_2/2+ "px";
|
|
button.style.width = cfg.awidth - height/2 -2 + "px";
|
|
button.style.height = height + 2 + "px";
|
|
button.style[style] = height/2 + 2 + "px";
|
|
button.style.top = webix.skin.$active.inputPadding+ "px";
|
|
|
|
},
|
|
_calc_size:function(config){
|
|
config = config || this._settings;
|
|
if (config.autowidth)
|
|
config.width = webix.html.getTextSize((config.value||config.label), "webixbutton").width +
|
|
(config.badge ? 15 : 0) +
|
|
(config.type === "iconButton" ? 30 : 0) +
|
|
(config.type === "icon"? 20 : 0);
|
|
},
|
|
_calck_input_size:function(){
|
|
//use width for both width and inputWidth settings in clever way
|
|
//in form, we can define width for some element smaller than for siblings
|
|
//it will use inputWidth to render the desired view
|
|
this._input_width = this._settings.inputWidth ||
|
|
((this._content_width - this._settings.width > 2)?this._settings.width:0) || this._content_width;
|
|
this._input_height = this._settings.inputHeight||this._inputHeight||0;
|
|
},
|
|
resize: function(){
|
|
this._calc_size();
|
|
return webix.ui.view.prototype.resize.apply(this,arguments);
|
|
},
|
|
render:function(){
|
|
this._calck_input_size();
|
|
this._settings.awidth = this._input_width||this._content_width;
|
|
this._settings.aheight = this._input_height||this._content_height;
|
|
|
|
//image button - image width
|
|
this._settings.bheight = this._settings.aheight+2;
|
|
this._settings.cheight = this._settings.aheight- 2*webix.skin.$active.inputPadding;
|
|
this._settings.dheight = this._settings.cheight - 2; // - borders
|
|
|
|
if(webix.AtomRender.render.call(this)){
|
|
this._rendered_input = true;
|
|
if (this._set_inner_size) this._set_inner_size();
|
|
if (this._settings.align){
|
|
var handle = this._dataobj.firstChild;
|
|
if (this._settings.labelPosition == "top" && handle.nextSibling)
|
|
handle = handle.nextSibling;
|
|
|
|
switch(this._settings.align){
|
|
case "right":
|
|
handle.style.cssFloat = "right";
|
|
break;
|
|
case "center":
|
|
handle.style.display = "inline-block";
|
|
handle.parentNode.style.textAlign = "center";
|
|
break;
|
|
case "middle":
|
|
handle.style.marginTop = Math.round((this._content_height-this._input_height)/2)+"px";
|
|
break;
|
|
case "bottom":
|
|
handle.style.marginTop = (this._content_height-this._input_height)+"px";
|
|
break;
|
|
case "left":
|
|
handle.style.cssFloat = "left";
|
|
break;
|
|
default:
|
|
webix.assert(false, "Unknown align mode: "+this._settings.align);
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (this.$render)
|
|
this.$render(this.data);
|
|
|
|
if (this._settings.disabled)
|
|
this.disable();
|
|
|
|
// set tooltip after render
|
|
if (this._settings.tooltip)
|
|
this.define("tooltip",this._settings.tooltip );
|
|
|
|
if (this._init_once){
|
|
this._init_once(this.data);
|
|
this._init_once = 0;
|
|
}
|
|
}
|
|
},
|
|
|
|
refresh:function(){ this.render(); },
|
|
|
|
on_click:{
|
|
_handle_tab_click: function(ev, button){
|
|
var id = webix.html.locate(ev, "button_id");
|
|
if (id && this.callEvent("onBeforeTabClick", [id, ev])){
|
|
this.setValue(id);
|
|
this.callEvent("onAfterTabClick", [id, ev]);
|
|
}
|
|
},
|
|
webix_all_segments:function(ev, button){
|
|
this.on_click._handle_tab_click.call(this, ev, button);
|
|
},
|
|
webix_all_tabs:function(ev, button) {
|
|
this.on_click._handle_tab_click.call(this, ev, button);
|
|
},
|
|
webix_inp_counter_next:function(e, obj, node){
|
|
this.next();
|
|
},
|
|
webix_inp_counter_prev:function(e, obj, node){
|
|
this.prev();
|
|
},
|
|
webix_inp_combo:function(e, obj, node){
|
|
node.focus();
|
|
},
|
|
webix_inp_checkbox_border: function(e, obj, node) {
|
|
if (!this._settings.disabled && (e.target||e.srcElement).tagName != "DIV" && !this._settings.readonly)
|
|
this.toggle();
|
|
},
|
|
webix_inp_checkbox_label: function(e, obj, node) {
|
|
if (!this._settings.readonly)
|
|
this.toggle();
|
|
},
|
|
webix_inp_radio_border: function(e, obj, node) {
|
|
var value = webix.html.locate(e, "radio_id");
|
|
this.setValue(value);
|
|
},
|
|
webix_inp_radio_label: function(e, obj, node) {
|
|
node = node.parentNode.getElementsByTagName('input')[0];
|
|
return this.on_click.webix_inp_radio_border.call(this, node, obj, node);
|
|
},
|
|
webix_tab_more_icon: function(ev,obj, node){
|
|
this.getPopup().resize();
|
|
this.getPopup().show(node,null,true);
|
|
},
|
|
webix_tab_close:function(ev, obj, node){
|
|
var id = webix.html.locate(ev, "button_id");
|
|
if (id && this.callEvent("onBeforeTabClose", [id, ev]))
|
|
this.removeOption(id);
|
|
}
|
|
},
|
|
|
|
//method do not used by button, but used by other child-views
|
|
_check_options:function(opts){
|
|
webix.assert(opts, this.name+": options not defined");
|
|
for(var i=0;i<opts.length;i++){
|
|
//FIXME: asserts need to be removed in final version
|
|
webix.assert(!opts[i].text, "Please replace .text with .value in control config");
|
|
webix.assert(!opts[i].label, "Please replace .label with .value in control config");
|
|
|
|
if(typeof opts[i]=="string"){
|
|
opts[i] = {id:opts[i], value:opts[i]};
|
|
}
|
|
else {
|
|
if(webix.isUndefined(opts[i].id))
|
|
opts[i].id = opts[i].value;
|
|
|
|
if(webix.isUndefined(opts[i].value))
|
|
opts[i].value = opts[i].id;
|
|
}
|
|
}
|
|
return opts;
|
|
},
|
|
_get_div_placeholder: function(obj){
|
|
var placeholder = (obj?obj.placeholder:this._settings.placeholder);
|
|
return (placeholder?"<span class='webix_placeholder'>"+placeholder+"</span>":"");
|
|
},
|
|
_get_event_id: function(evName){
|
|
return "webix_"+evName+"_"+this._settings.id;
|
|
}
|
|
}, webix.ui.view, webix.AtomRender, webix.Settings, webix.EventSystem);
|
|
|
|
webix.protoUI({
|
|
name:"label",
|
|
defaults:{
|
|
template:"<div style='height:100%;line-height:#cheight#px'>#label#</div>"
|
|
},
|
|
$skin:function(){
|
|
this.defaults.height = webix.skin.$active.inputHeight;
|
|
},
|
|
focus:function(){ return false; },
|
|
_getBox:function(){
|
|
return this._dataobj.firstChild;
|
|
},
|
|
setHTML:function(html){
|
|
this._settings.template = function(){ return html; };
|
|
this.refresh();
|
|
},
|
|
setValue: function(value){
|
|
this._settings.label = value;
|
|
webix.ui.button.prototype.setValue.apply(this,arguments);
|
|
},
|
|
$setValue:function(value){
|
|
this._dataobj.firstChild.innerHTML = value;
|
|
},
|
|
_set_inner_size:function(){}
|
|
}, webix.ui.button);
|
|
|
|
webix.protoUI({
|
|
name:"icon",
|
|
$skin:function(){
|
|
this.defaults.height = webix.skin.$active.inputHeight;
|
|
},
|
|
defaults:{
|
|
template:function(obj){
|
|
return "<button type='button' "+(!obj.tabFocus?"tabindex='-1'":"")+" style='height:100%;width:100%;' class='webix_icon_button'><span class='webix_icon fa-"+obj.icon+" '></span>"+
|
|
(obj.badge ? "<span class='webix_badge'>"+obj.badge+"</span>":"")+
|
|
"</button>";
|
|
},
|
|
width:33
|
|
},
|
|
_set_inner_size:function(){
|
|
|
|
}
|
|
}, webix.ui.button);
|
|
|
|
|
|
|
|
webix.protoUI({
|
|
name:"text",
|
|
_allowsClear:true,
|
|
_init_onchange:function(){
|
|
if (this._allowsClear){
|
|
|
|
webix.event(this.getInputNode(),"change",this._applyChanges,{bind:this});
|
|
|
|
if (this._settings.suggest)
|
|
webix.$$(this._settings.suggest).linkInput(this);
|
|
}
|
|
},
|
|
_applyChanges: function(){
|
|
var newvalue = this.getValue();
|
|
|
|
if (newvalue != this._settings.value)
|
|
this.setValue(newvalue, true);
|
|
},
|
|
$skin:function(){
|
|
this.defaults.height = webix.skin.$active.inputHeight;
|
|
this.defaults.inputPadding = webix.skin.$active.inputPadding;
|
|
},
|
|
$init:function(config){
|
|
if (config.labelPosition == "top")
|
|
if (webix.isUndefined(config.height) && this.defaults.height) // textarea
|
|
config.height = this.defaults.height + this._labelTopHeight;
|
|
|
|
//suggest reference for destructor
|
|
this._destroy_with_me = [];
|
|
|
|
this.attachEvent("onAfterRender", this._init_onchange);
|
|
},
|
|
$renderIcon:function(){
|
|
var config = this._settings;
|
|
if (config.icon){
|
|
var height = config.aheight - 2*config.inputPadding,
|
|
padding = (height - 18)/2 -1;
|
|
return "<span style='height:"+(height-padding)+"px;padding-top:"+padding+"px;' class='webix_input_icon fa-"+config.icon+"'></span>";
|
|
}
|
|
return "";
|
|
},
|
|
relatedView_setter:function(value){
|
|
this.attachEvent("onChange", function(){
|
|
var value = this.getValue();
|
|
var mode = this._settings.relatedAction;
|
|
var viewid = this._settings.relatedView;
|
|
var view = webix.$$(viewid);
|
|
if (!view){
|
|
var top = this.getTopParentView();
|
|
if (top && top.$$)
|
|
view = top.$$(viewid);
|
|
}
|
|
|
|
webix.assert(view, "Invalid relatedView: "+viewid);
|
|
|
|
if (mode == "enable"){
|
|
if (value) view.enable(); else view.disable();
|
|
} else {
|
|
if (value) view.show(); else view.hide();
|
|
}
|
|
});
|
|
return value;
|
|
},
|
|
validateEvent_setter:function(value){
|
|
if (value == "blur")
|
|
this.attachEvent("onBlur", this.validate);
|
|
|
|
if (value == "key")
|
|
this.attachEvent("onTimedKeyPress", this.validate);
|
|
|
|
return value;
|
|
},
|
|
validate:function(){
|
|
var rule = this._settings.validate;
|
|
if (!rule && this._settings.required)
|
|
rule = webix.rules.isNotEmpty;
|
|
|
|
var form =this.getFormView();
|
|
var name = this._settings.name;
|
|
var value = this.getValue();
|
|
var data = {}; data[name] = value;
|
|
|
|
webix.assert(form, "Validation works only for fields in the form");
|
|
webix.assert(name, "Validation works only for fields with name");
|
|
|
|
if (rule && !this.getFormView()._validate(rule, value, data, name))
|
|
return false;
|
|
return true;
|
|
},
|
|
bottomLabel_setter: function(value){
|
|
if(!this._settings.bottomPadding)
|
|
this._settings.bottomPadding = 18;
|
|
return value;
|
|
},
|
|
_getInvalidText: function(){
|
|
var text = this._settings.invalidMessage;
|
|
if(typeof text == "function"){
|
|
text.call(this);
|
|
}
|
|
return text;
|
|
},
|
|
setBottomText: function(text, height){
|
|
var config = this._settings;
|
|
if (typeof text != "undefined"){
|
|
if (config.bottomLabel == text) return;
|
|
config.bottomLabel = text;
|
|
}
|
|
|
|
var message = (config.invalid ? config.invalidMessage : "" ) || config.bottomLabel;
|
|
if (!message && !config.bottomPadding)
|
|
config.inputHeight = 0;
|
|
if (message && !config.bottomPadding){
|
|
this._restorePadding = 1;
|
|
config.bottomPadding = config.bottomPadding || height || 18;
|
|
//textarea
|
|
if (!config.height)
|
|
this.render();
|
|
this.resize();
|
|
} else if (!message && this._restorePadding){
|
|
config.bottomPadding = this._restorePadding = 0;
|
|
//textarea
|
|
if (!config.height)
|
|
this.render();
|
|
this.resize();
|
|
} else
|
|
this.render();
|
|
},
|
|
$getSize: function(){
|
|
var sizes = webix.ui.view.prototype.$getSize.apply(this,arguments);
|
|
var heightInc = this.config.bottomPadding;
|
|
if(heightInc){
|
|
sizes[2] += heightInc;
|
|
sizes[3] += heightInc;
|
|
}
|
|
return sizes;
|
|
},
|
|
$setSize:function(x,y){
|
|
var config = this._settings;
|
|
|
|
if(webix.ui.view.prototype.$setSize.call(this,x,y)){
|
|
if (!x || !y) return;
|
|
|
|
if (config.labelPosition == "top"){
|
|
// textarea
|
|
if (!config.inputHeight)
|
|
this._inputHeight = this._content_height - this._labelTopHeight - (this.config.bottomPadding||0);
|
|
config.labelWidth = 0;
|
|
} else if (config.bottomPadding){
|
|
config.inputHeight = this._content_height - this.config.bottomPadding;
|
|
}
|
|
this.render();
|
|
}
|
|
},
|
|
_get_input_width: function(config){
|
|
var width = (this._input_width||0)-(config.label?this._settings.labelWidth:0)- 4 - (config.iconWidth || 0);
|
|
|
|
//prevent js error in IE
|
|
return (width < 0)?0:width;
|
|
},
|
|
_render_div_block:function(obj, common){
|
|
var id = "x"+webix.uid();
|
|
var width = common._get_input_width(obj);
|
|
var inputAlign = obj.inputAlign || "left";
|
|
var icon = this.$renderIcon?this.$renderIcon(obj):"";
|
|
var height = this._settings.aheight - 2*webix.skin.$active.inputPadding -2;
|
|
var text = (obj.text||obj.value||this._get_div_placeholder(obj));
|
|
var html = "<div class='webix_inp_static' tabindex='0' onclick='' style='line-height:"+height+"px;width: " + width + "px; text-align: " + inputAlign + ";' >"+ text +"</div>";
|
|
return common.$renderInput(obj, html, id);
|
|
},
|
|
_baseInputHTML:function(tag){
|
|
var html = "<"+tag+(this._settings.placeholder?" placeholder='"+this._settings.placeholder+"' ":" ");
|
|
if (this._settings.readonly)
|
|
html += "readonly='true' ";
|
|
|
|
var attrs = this._settings.attributes;
|
|
if (attrs)
|
|
for(var prop in attrs)
|
|
html += prop+"='"+attrs[prop]+"' ";
|
|
return html;
|
|
},
|
|
$renderLabel: function(config, id){
|
|
var labelAlign = (config.labelAlign||"left");
|
|
var top = this._settings.labelPosition == "top";
|
|
var labelTop = top?"display:block;":("width: " + this._settings.labelWidth + "px;");
|
|
var label = "";
|
|
var labelHeight = top?this._labelTopHeight-2:( this._settings.aheight - 2*this._settings.inputPadding);
|
|
if (config.label)
|
|
label = "<label style='"+labelTop+"text-align: " + labelAlign + ";line-height:"+labelHeight+"px;' onclick='' for='"+id+"' class='webix_inp_"+(top?"top_":"")+"label "+(config.required?"webix_required":"")+"'>" + (config.label||"") + "</label>";
|
|
return label;
|
|
},
|
|
$renderInput: function(config, div_start, id) {
|
|
var inputAlign = (config.inputAlign||"left");
|
|
var top = (config.labelPosition == "top");
|
|
var inputWidth = this._get_input_width(config);
|
|
|
|
id = id||webix.uid();
|
|
|
|
var label = this.$renderLabel(config,id);
|
|
|
|
var html = "";
|
|
if(div_start){
|
|
html += div_start;
|
|
} else {
|
|
html += this._baseInputHTML("input")+"id='" + id + "' type='"+(config.type||this.name)+"' value='" + webix.template.escape(config.value||"") + "' style='width: " + inputWidth + "px; text-align: " + inputAlign + ";'";
|
|
var attrs = config.attributes;
|
|
if (attrs)
|
|
for(var prop in attrs)
|
|
html += " "+prop+"='"+attrs[prop]+"'";
|
|
html += " />";
|
|
}
|
|
var icon = this.$renderIcon?this.$renderIcon(config):"";
|
|
html += icon;
|
|
|
|
var result = "";
|
|
//label position, top or left
|
|
if (top)
|
|
result = label+"<div class='webix_el_box' style='width:"+config.awidth+"px; height:"+config.aheight+"px'>"+html+"</div>";
|
|
else
|
|
result = "<div class='webix_el_box' style='width:"+config.awidth+"px; height:"+config.aheight+"px'>"+label+html+"</div>";
|
|
|
|
|
|
//bottom message width
|
|
var padding = config.awidth-inputWidth-webix.skin.$active.inputPadding*2;
|
|
//bottom message text
|
|
var message = (config.invalid ? config.invalidMessage : "") || config.bottomLabel;
|
|
if (message)
|
|
result += "<div class='webix_inp_bottom_label' style='width:"+(inputWidth||config.awidth)+"px;margin-left:"+Math.max(padding,webix.skin.$active.inputPadding)+"px;'>"+message+"</div>";
|
|
|
|
return result;
|
|
},
|
|
defaults:{
|
|
template:function(obj, common){
|
|
return common.$renderInput(obj);
|
|
},
|
|
label:"",
|
|
labelWidth:80
|
|
},
|
|
type_setter:function(value){ return value; },
|
|
_set_inner_size:false,
|
|
$setValue:function(value){
|
|
this.getInputNode().value = value;
|
|
},
|
|
$getValue:function(){
|
|
return this.getInputNode().value;
|
|
},
|
|
suggest_setter:function(value){
|
|
if (value){
|
|
webix.assert(value !== true, "suggest options can't be set as true, data need to be provided instead");
|
|
|
|
if (typeof value == "string"){
|
|
var attempt = webix.$$(value);
|
|
if (attempt)
|
|
return webix.$$(value)._settings.id;
|
|
|
|
value = { body: { url:value , dataFeed :value } };
|
|
} else if (webix.isArray(value))
|
|
value = { body: { data: this._check_options(value) } };
|
|
else if (!value.body)
|
|
value.body = {};
|
|
|
|
webix.extend(value, { view:"suggest" });
|
|
|
|
var view = webix.ui(value);
|
|
this._destroy_with_me.push(view);
|
|
return view._settings.id;
|
|
}
|
|
return false;
|
|
}
|
|
}, webix.ui.button);
|
|
|
|
webix.protoUI({
|
|
name:"segmented",
|
|
_allowsClear:false,
|
|
$init:function(){
|
|
this.attachEvent("onChange", function(value){
|
|
if (this._settings.multiview){
|
|
var top = this.getTopParentView();
|
|
var view = null;
|
|
|
|
//get from local isolate
|
|
if (top && top.$$)
|
|
view = top.$$(value);
|
|
//or check globally
|
|
if (!view)
|
|
view = webix.$$(value);
|
|
|
|
if(view && view.show)
|
|
view.show();
|
|
}
|
|
});
|
|
},
|
|
defaults:{
|
|
template:function(obj, common){
|
|
if(!obj.options)
|
|
webix.assert(false, "segmented: options undefined");
|
|
var options = obj.options;
|
|
common._check_options(options);
|
|
options = common._filterOptions(options);
|
|
|
|
var width = common._get_input_width(obj);
|
|
|
|
var id = webix.uid();
|
|
var html = "<div style='width:"+width+"px' class='webix_all_segments'>";
|
|
var optionWidth = obj.optionWidth || Math.floor(width/options.length);
|
|
if(!obj.value)
|
|
obj.value = options[0].id;
|
|
|
|
for(var i=0; i<options.length; i++){
|
|
html+="<button type='button' style='width:"+(options[i].width || optionWidth)+"px' ";
|
|
html+="class='"+((obj.value==options[i].id)?"webix_selected ":"")+"webix_segment_"+((i==options.length-1)?"N":(i>0?1:0))+"' button_id='"+options[i].id+"' >";
|
|
html+= options[i].value+"</button>";
|
|
}
|
|
|
|
return common.$renderInput(obj, html+"</div>", id);
|
|
}
|
|
},
|
|
$setValue:function(value){
|
|
this.refresh();
|
|
},
|
|
getValue:function(){
|
|
return this._settings.value;
|
|
},
|
|
getInputNode:function(){
|
|
return null;
|
|
},
|
|
optionIndex:function(id){
|
|
var pages = this._settings.options;
|
|
for (var i=0; i<pages.length; i++)
|
|
if (pages[i].id == id)
|
|
return i;
|
|
return -1;
|
|
},
|
|
addOption:function(id, value, show, index){
|
|
var obj = id;
|
|
if (typeof id != "object"){
|
|
value = value || id;
|
|
obj = { id:id, value:value };
|
|
} else {
|
|
id = obj.id;
|
|
index = show;
|
|
show = value;
|
|
}
|
|
|
|
if (this.optionIndex(id) < 0)
|
|
webix.PowerArray.insertAt.call(this._settings.options, obj, index);
|
|
|
|
if (show)
|
|
this.setValue(id);
|
|
},
|
|
removeOption:function(id, value){
|
|
var index = this.optionIndex(id);
|
|
var options = this._settings.options;
|
|
|
|
if (index >= 0)
|
|
webix.PowerArray.removeAt.call(options, index);
|
|
|
|
// if we remove a selected option
|
|
if(this._settings.value == id)
|
|
this._setNextVisible(options, index);
|
|
|
|
this.callEvent("onOptionRemove", [id, this._settings.value]);
|
|
this.refresh();
|
|
|
|
},
|
|
_setNextVisible: function(options, index){
|
|
var size = options.length;
|
|
|
|
if(size){
|
|
index = Math.min(index, size-1);
|
|
//forward search
|
|
for (var i=index; i<size; i++)
|
|
if (!options[i].hidden)
|
|
return this.setValue(options[i].id);
|
|
//backward search
|
|
for (var i=index; i>=0; i--)
|
|
if (!options[i].hidden)
|
|
return this.setValue(options[i].id);
|
|
}
|
|
|
|
//nothing found
|
|
this.setValue("");
|
|
},
|
|
_filterOptions: function(options){
|
|
var copy = [];
|
|
for(var i=0; i<options.length;i++)
|
|
if(!options[i].hidden)
|
|
copy.push(options[i]);
|
|
return copy;
|
|
},
|
|
_setOptionVisibility: function(id, state){
|
|
var options = this._settings.options;
|
|
var index = this.optionIndex(id);
|
|
var option = options[index];
|
|
if (option && state == !!option.hidden){ //new state differs from previous one
|
|
option.hidden = !state;
|
|
if (state || this._settings.value != id){ //show item, no need for extra steps
|
|
this.refresh();
|
|
} else { //hide item, switch to next visible one
|
|
this._setNextVisible(options, index);
|
|
}
|
|
}
|
|
},
|
|
hideOption: function(id){
|
|
this._setOptionVisibility(id,false);
|
|
},
|
|
showOption: function(id){
|
|
this._setOptionVisibility(id,true);
|
|
},
|
|
_set_inner_size:false
|
|
}, webix.ui.text);
|
|
|
|
webix.protoUI({
|
|
name:"search",
|
|
$skin:function(){
|
|
this.defaults.inputPadding = webix.skin.$active.inputPadding;
|
|
},
|
|
on_click:{
|
|
"webix_input_icon":function(e){
|
|
return this.callEvent("onSearchIconClick", [e]);
|
|
}
|
|
},
|
|
defaults:{
|
|
type:"text",
|
|
icon:"search"
|
|
}
|
|
}, webix.ui.text);
|
|
|
|
webix.protoUI({
|
|
name:"toggle",
|
|
_allowsClear:true,
|
|
$init:function(){
|
|
this.attachEvent("onItemClick", function(){
|
|
this.toggle();
|
|
});
|
|
},
|
|
$setValue:function(value){
|
|
this.render();
|
|
},
|
|
toggle:function(){
|
|
this.setValue(!this.getValue());
|
|
},
|
|
getValue:function(){
|
|
var value = this._settings.value;
|
|
return (!value||value=="0")?0:1;
|
|
},
|
|
defaults:{
|
|
template:function(obj, common){
|
|
var css = obj.value ? " webix_pressed" : "";
|
|
obj.label = (obj.value ? obj.onLabel : obj.offLabel) || obj.label;
|
|
obj.icon = (obj.value ? obj.onIcon : obj.offIcon) || obj.icon;
|
|
return "<div class='webix_el_box"+css+"' style='width:"+obj.awidth+"px; height:"+obj.aheight+"px'>"+common.$renderInput(obj, common)+"</div>";
|
|
}
|
|
},
|
|
_set_inner_size:false
|
|
}, webix.ui.button);
|
|
|
|
webix.protoUI({
|
|
name:"select",
|
|
defaults:{
|
|
template:function(obj,common) {
|
|
var options = common._check_options(obj.options);
|
|
var id = "x"+webix.uid();
|
|
var html = common._baseInputHTML("select")+"id='"+id+"' style='width:"+common._get_input_width(obj)+"px;'>";
|
|
|
|
var optview = webix.$$(options);
|
|
if(optview && optview.data && optview.data.each){
|
|
optview.data.each(function(option){
|
|
html+="<option"+((option.id == obj.value)?" selected='true'":"")+" value='"+option.id+"'>"+option.value+"</option>";
|
|
});
|
|
}else
|
|
for(var i=0; i<options.length; i++) {
|
|
html+="<option"+((options[i].id == obj.value)?" selected='true'":"")+" value='"+options[i].id+"'>"+options[i].value+"</option>";
|
|
}
|
|
html += "</select>";
|
|
return common.$renderInput(obj, html, id);
|
|
}
|
|
},
|
|
options_setter:function(value){
|
|
if(value){
|
|
if(typeof value =="string"){
|
|
var collection = new webix.DataCollection({url:value});
|
|
collection.data.attachEvent("onStoreLoad", webix.bind(this.refresh, this));
|
|
return collection;
|
|
}
|
|
else
|
|
return value;
|
|
}
|
|
},
|
|
//get input element
|
|
getInputNode: function() {
|
|
return this._dataobj.getElementsByTagName('select')[0];
|
|
}
|
|
}, webix.ui.text);
|
|
|
|
webix.protoUI({
|
|
name:"textarea",
|
|
$skin:function(){},
|
|
defaults:{
|
|
template:function(obj, common){
|
|
var name = obj.name || obj.id;
|
|
var id = "x"+webix.uid();
|
|
|
|
var html = common._baseInputHTML("textarea")+"style='width:"+common._get_input_width(obj)+"px;'";
|
|
html +=" id='"+id+"' name='"+name+"' class='webix_inp_textarea'>"+(obj.value||"")+"</textarea>";
|
|
|
|
return common.$renderInput(obj, html, id);
|
|
},
|
|
height:0,
|
|
minHeight:60
|
|
},
|
|
_skipSubmit: true,
|
|
$renderLabel: function(config, id){
|
|
var labelAlign = (config.labelAlign||"left");
|
|
var top = this._settings.labelPosition == "top";
|
|
var labelTop = top?"display:block;":("width: " + this._settings.labelWidth + "px;");
|
|
var label = "";
|
|
var labelHeight = top?this._labelTopHeight-2:( (webix.skin.$active.inputHeight||this._settings.aheight) - 2*this._settings.inputPadding);
|
|
if (config.label)
|
|
label = "<label style='"+labelTop+"text-align: " + labelAlign + ";' onclick='' for='"+id+"' class='webix_inp_"+(top?"top_":"")+"label "+(config.required?"webix_required":"")+"'>" + (config.label||"") + "</label>";
|
|
return label;
|
|
},
|
|
//get input element
|
|
getInputNode: function() {
|
|
return this._dataobj.getElementsByTagName('textarea')[0];
|
|
}
|
|
}, webix.ui.text);
|
|
|
|
webix.protoUI({
|
|
name:"counter",
|
|
defaults:{
|
|
template:function(config, common){
|
|
var value = (config.value||0);
|
|
|
|
var id = "x"+webix.uid();
|
|
var html = "<div class='webix_el_group' style='width:"+common._get_input_width(config)+"px'>";
|
|
html += "<button type='button' class='webix_inp_counter_prev'>-</button>";
|
|
html += common._baseInputHTML("input")+" id='"+id+"' type='text' class='webix_inp_counter_value' value='"+value+"'></input>";
|
|
html += "<button type='button' class='webix_inp_counter_next'>+</button></div>";
|
|
return common.$renderInput(config, html, id);
|
|
},
|
|
min:0,
|
|
max:Infinity,
|
|
step:1
|
|
},
|
|
$setValue:function(value){
|
|
this.getInputNode().value = value;
|
|
},
|
|
getInputNode:function(){
|
|
return this._dataobj.getElementsByTagName("input")[0];
|
|
},
|
|
getValue:function(obj){
|
|
return webix.ui.button.prototype.getValue.apply(this,arguments)*1;
|
|
},
|
|
next:function(step){
|
|
step = this._settings.step;
|
|
this.shift(step);
|
|
},
|
|
prev:function(step){
|
|
step = (-1)*this._settings.step;
|
|
this.shift(step);
|
|
},
|
|
shift:function(step){
|
|
var min = this._settings.min;
|
|
var max = this._settings.max;
|
|
|
|
var new_value = this.getValue() + step;
|
|
if (new_value >= min && new_value <= max)
|
|
this.setValue(new_value);
|
|
}
|
|
}, webix.ui.text);
|
|
|
|
|
|
webix.protoUI({
|
|
name:"checkbox",
|
|
defaults:{
|
|
checkValue:1,
|
|
uncheckValue:0,
|
|
template:function(config, common) {
|
|
var id = "x"+webix.uid();
|
|
var rightlabel = "";
|
|
if (config.labelRight){
|
|
rightlabel = "<label class='webix_label_right'>"+config.labelRight+"</label>";
|
|
//user clearly attempts to hide the label, help him
|
|
if (config.labelWidth)
|
|
config.label = config.label || " ";
|
|
}
|
|
var checked = (config.checkValue == config.value);
|
|
var margin = Math.floor((common._settings.aheight-16)/2);
|
|
var ch = common._baseInputHTML("input")+"style='margin-top:"+margin+"px;"+(config.customCheckbox?"display:none":"")+"' id='"+id+"' type='checkbox' "+(checked?"checked='1'":"")+"/>";
|
|
var className = "webix_inp_checkbox_border webix_el_group webix_checkbox_"+(checked?"1":"0");
|
|
var html = "<div style='line-height:"+common._settings.cheight+"px' class='"+className+"'>"+ch+(config.customCheckbox||"")+rightlabel+"</div>";
|
|
return common.$renderInput(config, html, id);
|
|
}
|
|
},
|
|
customCheckbox_setter: function(value){
|
|
if( value === true && webix.skin.$active.customCheckbox){
|
|
value = "<a onclick='javascript:void(0)'><button type='button' class='webix_custom_checkbox'></button></a>";
|
|
}
|
|
return value;
|
|
},
|
|
focus: function(){
|
|
var input = this.$view.getElementsByTagName(this._settings.customCheckbox?"button":"input")[0];
|
|
if(input)
|
|
input.focus();
|
|
},
|
|
blur: function(){
|
|
var input = this.$view.getElementsByTagName(this._settings.customCheckbox?"button":"input")[0];
|
|
if(input)
|
|
input.blur();
|
|
},
|
|
_init_onchange: function(){},
|
|
$setValue:function(value){
|
|
var isChecked = (value == this._settings.checkValue);
|
|
var parentNode = this.getInputNode()?this.getInputNode().parentNode:null;
|
|
if(parentNode){
|
|
parentNode.className = parentNode.className.replace(/(webix_checkbox_)\d/,"$1"+(isChecked?1:0));
|
|
}
|
|
this.getInputNode().checked = isChecked;
|
|
},
|
|
toggle:function(){
|
|
var value = (this.getValue() != this._settings.checkValue)?this._settings.checkValue:this._settings.uncheckValue;
|
|
this.setValue(value);
|
|
},
|
|
getValue:function(){
|
|
var value = this._settings.value;
|
|
return (value == this._settings.checkValue)?this._settings.checkValue:this._settings.uncheckValue;
|
|
},
|
|
$skin:function(){
|
|
if(webix.skin.$active.customCheckbox)
|
|
this.defaults.customCheckbox = true;
|
|
}
|
|
}, webix.ui.text);
|
|
|
|
webix.protoUI({
|
|
name:"radio",
|
|
defaults:{
|
|
template: function(config,common) {
|
|
var options = common._check_options(config.options);
|
|
var html = [];
|
|
var id;
|
|
|
|
for (var i=0; i < options.length; i++) {
|
|
var eachid = "x"+webix.uid();
|
|
id = id || eachid;
|
|
|
|
if (i && (options[i].newline || config.vertical))
|
|
html.push("<div class='webix_line_break'></div>");
|
|
var isChecked = (options[i].id == config.value);
|
|
var rd = common._baseInputHTML("input")+" name='"+config.name+"' type='radio' "+(isChecked?"checked='1'":"")+" value='"+options[i].id+"' id='"+eachid+"' style='"+(config.customRadio?"display:none":"")+"' />";
|
|
var input = "<div radio_id='"+options[i].id+"' class='webix_inp_radio_border webix_radio_"+(isChecked?"1":"0")+"'>"+rd+(config.customRadio||"")+"</div>";
|
|
var label = options[i].value || "";
|
|
if (label)
|
|
label = "<label for='"+eachid+"' class='webix_label_right'>" + label + "</label>";
|
|
|
|
html.push("<div class='webix_radio_option'>"+input + label+"</div>");
|
|
|
|
}
|
|
html = "<div class='webix_el_group' style='margin-left:"+(config.label?config.labelWidth:0)+"px;'>"+html.join("")+"</div>";
|
|
|
|
return common.$renderInput(config, html, id);
|
|
}
|
|
},
|
|
refresh:function(){
|
|
this.render();
|
|
if (this._last_size && this.$getSize(0,0)[2] != this._last_size[1])
|
|
this.resize();
|
|
},
|
|
$getSize:function(dx, dy){
|
|
var size = webix.ui.button.prototype.$getSize.call(this, dx, dy);
|
|
if (this._settings.options){
|
|
var count = 0;
|
|
for (var i=0; i < this._settings.options.length; i++)
|
|
if (this._settings.vertical || this._settings.options[i].newline)
|
|
count++;
|
|
size[3] = size[2] = Math.max(size[2], (this._settings.optionHeight||25) * count+this._settings.inputPadding*2);
|
|
}
|
|
var heightInc = this.config.bottomPadding;
|
|
if(heightInc){
|
|
size[2] += heightInc;
|
|
size[3] += heightInc;
|
|
}
|
|
return size;
|
|
},
|
|
_getInputNode: function(){
|
|
return this._dataobj.getElementsByTagName('input');
|
|
},
|
|
$setValue:function(value){
|
|
var inp = this._getInputNode();
|
|
|
|
for (var i=0; i < inp.length; i++){
|
|
if (inp[i].parentNode.getAttribute("radio_id")==value){
|
|
inp[i].className = "webix_inp_radio_on";
|
|
inp[i].checked = true;
|
|
} else{
|
|
inp[i].className = "webix_inp_radio_on webix_hidden";
|
|
inp[i].checked = false;
|
|
}
|
|
var parentNode = inp[i]?inp[i].parentNode:null;
|
|
if(parentNode){
|
|
parentNode.className = parentNode.className.replace(/(webix_radio_)\d/,"$1"+(inp[i].checked?1:0));
|
|
}
|
|
|
|
}
|
|
},
|
|
getValue:function(obj){
|
|
return this._settings.value;
|
|
},
|
|
focus: function(){
|
|
var input = this.$view.getElementsByTagName(this._settings.customRadio?"button":"input")[0];
|
|
if(input)
|
|
input.focus();
|
|
},
|
|
blur: function(){
|
|
var input = this.$view.getElementsByTagName(this._settings.customRadio?"button":"input")[0];
|
|
if(input)
|
|
input.blur();
|
|
},
|
|
customRadio_setter: function(value){
|
|
if(value === true && webix.skin.$active.customRadio)
|
|
value = "<a onclick='javascript:void(0)'><button type='button' class='webix_custom_radio'></button></a>";
|
|
return value;
|
|
},
|
|
$skin:function(){
|
|
if(webix.skin.$active.customRadio)
|
|
this.defaults.customRadio = true;
|
|
if(webix.skin.$active.optionHeight)
|
|
this.defaults.optionHeight = webix.skin.$active.optionHeight;
|
|
}
|
|
}, webix.ui.text);
|
|
|
|
webix.protoUI({
|
|
name:"richselect",
|
|
defaults:{
|
|
template:function(obj,common){
|
|
return common._render_div_block(obj, common);
|
|
},
|
|
popupWidth:200,
|
|
icon: "angle-down"
|
|
},
|
|
suggest_setter:function(value){
|
|
return this.options_setter(value);
|
|
},
|
|
options_setter:function(value){
|
|
value = this._suggest_config ? this._suggest_config(value) : value;
|
|
var suggest = (this._settings.popup = this._settings.suggest = webix.ui.text.prototype.suggest_setter.call(this, value));
|
|
var list = webix.$$(suggest).getList();
|
|
if (list)
|
|
list.attachEvent("onAfterLoad", webix.bind(this._reset_value, this));
|
|
|
|
return suggest;
|
|
},
|
|
getList: function(){
|
|
var suggest = webix.$$(this._settings.suggest);
|
|
webix.assert(suggest, "Input doesn't have a list");
|
|
return suggest.getList();
|
|
},
|
|
_reset_value:function(){
|
|
var value = this._settings.value;
|
|
if(!webix.isUndefined(value) && !this.getPopup().isVisible() && !this._settings.text)
|
|
this.$setValue(value);
|
|
},
|
|
|
|
$skin:function(){
|
|
this.defaults.inputPadding = webix.skin.$active.inputPadding;
|
|
},
|
|
|
|
$render:function(obj){
|
|
if (webix.isUndefined(obj.value)) return;
|
|
this.$setValue(obj.value);
|
|
},
|
|
getInputNode: function(){
|
|
return this._dataobj.getElementsByTagName("DIV")[1];
|
|
},
|
|
getPopup: function(){
|
|
return webix.$$(this._settings.popup);
|
|
},
|
|
getText:function(){
|
|
var node = this.getInputNode();
|
|
return typeof node.value == "undefined" ? node.innerHTML : node.value;
|
|
},
|
|
$setValue:function(value){
|
|
if (!this._rendered_input) return;
|
|
|
|
var text = value;
|
|
var popup = this.getPopup();
|
|
|
|
if (popup)
|
|
var text = this.getPopup().getItemText(value);
|
|
|
|
if (!text && value && value.id){
|
|
this.getPopup().getList().add(value);
|
|
text = this.getPopup().getItemText(value.id);
|
|
this._settings.value = value.id;
|
|
}
|
|
|
|
this._settings.text = text;
|
|
|
|
var node = this.getInputNode();
|
|
|
|
if (webix.isUndefined(node.value))
|
|
node.innerHTML = text || this._get_div_placeholder();
|
|
else
|
|
node.value = text.replace(/<[^>]*>/g,"");
|
|
},
|
|
getValue:function(){
|
|
return this._settings.value||"";
|
|
}
|
|
}, webix.ui.text);
|
|
|
|
|
|
webix.protoUI({
|
|
name:"combo",
|
|
$init:function(){
|
|
this.attachEvent("onBlur", webix.bind(function(e){
|
|
if (this._settings.text == this.getText())
|
|
return;
|
|
var data = this.getPopup().getSuggestion();
|
|
if (data && !(this.getInputNode().value==="" && webix.$$(this._settings.suggest).getItemText(data)!=="")){
|
|
this.setValue(data);
|
|
} else if(!this._settings.editable){
|
|
var value = this.getValue();
|
|
this.$setValue(webix.isUndefined(value)?"":value);
|
|
}
|
|
|
|
},this));
|
|
},
|
|
getInputNode:function(){
|
|
return this._dataobj.getElementsByTagName('input')[0];
|
|
},
|
|
$render:function(obj){
|
|
if (webix.isUndefined(obj.value)) return;
|
|
this.$setValue(obj.value);
|
|
},
|
|
_applyChanges:function(){
|
|
var input = this.getInputNode();
|
|
var newvalue = "";
|
|
if (input.value)
|
|
newvalue = webix.$$(this._settings.suggest).getSuggestion() || this._settings.value;
|
|
if (newvalue != this._settings.value)
|
|
this.setValue(newvalue, true);
|
|
else
|
|
this.$setValue(newvalue);
|
|
},
|
|
defaults:{
|
|
template:function(config, common){
|
|
return common.$renderInput(config);
|
|
},
|
|
icon: "angle-down"
|
|
}
|
|
}, webix.ui.richselect);
|
|
|
|
|
|
webix.protoUI({
|
|
name:"datepicker",
|
|
$init:function(){
|
|
this.$ready.push(this._init_popup);
|
|
},
|
|
defaults:{
|
|
template:function(obj, common){
|
|
if(common._settings.type == "time"){
|
|
common._settings.icon = common._settings.timeIcon;
|
|
}
|
|
//temporary remove obj.type [[DIRTY]]
|
|
var t = obj.type; obj.type = "";
|
|
var res = obj.editable?common.$renderInput(obj):common._render_div_block(obj, common);
|
|
obj.type = t;
|
|
return res;
|
|
},
|
|
stringResult:false,
|
|
timepicker:false,
|
|
icon:"calendar",
|
|
icons: true,
|
|
timeIcon: "clock-o"
|
|
},
|
|
$skin:function(){
|
|
this.defaults.inputPadding = webix.skin.$active.inputPadding;
|
|
},
|
|
getPopup: function(){
|
|
return webix.$$(this._settings.popup);
|
|
},
|
|
_init_popup:function(){
|
|
var obj = this._settings;
|
|
if (obj.suggest)
|
|
obj.popup = obj.suggest;
|
|
else if (!obj.popup){
|
|
var timepicker = this._settings.timepicker;
|
|
obj.popup = obj.suggest = this.suggest_setter({
|
|
type:"calendar", height:240+(timepicker?30:0), width:250, padding:0,
|
|
body: { timepicker:timepicker, type: this._settings.type, icons: this._settings.icons }
|
|
});
|
|
}
|
|
|
|
|
|
this._init_once = function(){};
|
|
},
|
|
$render:function(obj){
|
|
if (webix.isUndefined(obj.value)) return;
|
|
this.$setValue(obj.value);
|
|
},
|
|
_parse_value:function(value){
|
|
var type = this._settings.type;
|
|
var timeMode = type == "time";
|
|
|
|
//setValue("1980-12-25")
|
|
if(!isNaN(parseFloat(value)))
|
|
value = ""+value;
|
|
|
|
if (typeof value=="string" && value){
|
|
var formatDate = null;
|
|
if((type == "month" || type == "year") && this._formatDate){
|
|
formatDate = this._formatDate;
|
|
}
|
|
else
|
|
formatDate = (timeMode?webix.i18n.parseTimeFormatDate:webix.i18n.parseFormatDate);
|
|
value = formatDate(value);
|
|
}
|
|
|
|
if (value){
|
|
//time mode
|
|
if(timeMode){
|
|
//setValue([16,24])
|
|
if(webix.isArray(value)){
|
|
var time = new Date();
|
|
time.setHours(value[0]);
|
|
time.setMinutes(value[1]);
|
|
value = time;
|
|
}
|
|
}
|
|
//setValue(invalid date)
|
|
|
|
|
|
|
|
if(isNaN(value.getTime()))
|
|
value = "";
|
|
}
|
|
|
|
return value;
|
|
},
|
|
$setValue:function(value){
|
|
var popup = webix.$$(this._settings.popup.toString());
|
|
var calendar = popup._body_cell;
|
|
|
|
//convert string or array to date
|
|
value = this._parse_value(value);
|
|
//select date in calendar-popup
|
|
calendar.selectDate(value,true);
|
|
|
|
//save value
|
|
this._settings.value = (value)?calendar.config.date:"";
|
|
|
|
//set visible date
|
|
var timeMode = this._settings.type == "time";
|
|
var timepicker = this.config.timepicker;
|
|
var formatStr = this._formatStr||(timeMode?webix.i18n.timeFormatStr:(timepicker?webix.i18n.fullDateFormatStr:webix.i18n.dateFormatStr));
|
|
this._settings.text = (value?formatStr(this._settings.value):"");
|
|
|
|
var node = this.getInputNode();
|
|
if(node.value == webix.undefined){
|
|
node.innerHTML = this._settings.text || this._get_div_placeholder();
|
|
}
|
|
else{
|
|
node.value = this._settings.text || "";
|
|
}
|
|
},
|
|
format_setter:function(value){
|
|
if(value){
|
|
if (typeof value === "function")
|
|
this._formatStr = value;
|
|
else {
|
|
this._formatStr = webix.Date.dateToStr(value);
|
|
this._formatDate = webix.Date.strToDate(value);
|
|
}
|
|
}
|
|
else
|
|
this._formatStr = this._formatDate = null;
|
|
return value;
|
|
},
|
|
getInputNode: function(){
|
|
return this._settings.editable?this._dataobj.getElementsByTagName('input')[0]:this._dataobj.getElementsByTagName("DIV")[1];
|
|
},
|
|
getValue:function(){
|
|
var type = this._settings.type;
|
|
//time mode
|
|
var timeMode = (type == "time");
|
|
//date and time mode
|
|
var timepicker = this.config.timepicker;
|
|
|
|
var value = this._settings.value;
|
|
|
|
//input was not rendered, we need to parse value from setValue method
|
|
if (!this._rendered_input)
|
|
value = this._parse_value(value) || null;
|
|
//rendere and in edit mode
|
|
else if (this._settings.editable){
|
|
var formatDate = this._formatDate||(timeMode?webix.i18n.timeFormatDate:(timepicker?webix.i18n.fullDateFormatDate:webix.i18n.dateFormatDate));
|
|
value = formatDate(this.getInputNode().value);
|
|
}
|
|
|
|
//return string from getValue
|
|
if(this._settings.stringResult){
|
|
var formatStr =webix.i18n.parseFormatStr;
|
|
if(timeMode)
|
|
formatStr = webix.i18n.parseTimeFormatStr;
|
|
if(this._formatStr && (type == "month" || type == "year")){
|
|
formatStr = this._formatStr;
|
|
}
|
|
|
|
return (value?formatStr(value):"");
|
|
}
|
|
|
|
return value||null;
|
|
},
|
|
getText:function(){
|
|
var node = this.getInputNode();
|
|
return (node?(typeof node.value == "undefined" ? node.innerHTML : node.value):"");
|
|
}
|
|
}, webix.ui.text);
|
|
|
|
webix.protoUI({
|
|
name:"colorpicker",
|
|
$init:function(){
|
|
this.$ready.push(this._init_popup);
|
|
},
|
|
defaults:{
|
|
icon:true
|
|
},
|
|
_init_popup:function(){
|
|
var obj = this._settings;
|
|
if (obj.suggest)
|
|
obj.popup = obj.suggest;
|
|
else if (!obj.popup)
|
|
obj.popup = obj.suggest = this.suggest_setter({
|
|
type:"colorboard", height:200
|
|
});
|
|
this._init_once = function(){};
|
|
},
|
|
$render:function(obj){
|
|
if (webix.isUndefined(obj.value)) return;
|
|
this.$setValue(obj.value);
|
|
},
|
|
getValue:function(){
|
|
if (this._rendered_input && this._settings.editable)
|
|
return this.getInputNode().value;
|
|
else
|
|
return this._settings.value;
|
|
},
|
|
_getColorNode: function(){
|
|
return this.$view.getElementsByTagName("DIV")[this._settings.editable?1:2];
|
|
},
|
|
$setValue:function(value){
|
|
var popup = webix.$$(this.config.popup.toString());
|
|
var colorboard = popup.getBody();
|
|
colorboard.setValue(value);
|
|
this.config.value = value;
|
|
this._getColorNode().style.backgroundColor = value;
|
|
var node = this.getInputNode();
|
|
if(node.value == webix.undefined)
|
|
node.innerHTML = value;
|
|
else
|
|
node.value = value;
|
|
},
|
|
$renderIcon:function(){
|
|
var config = this.config;
|
|
return '<div class="webix_input_icon" style="background-color:'+config.value+';"> </div>';
|
|
}
|
|
}, webix.ui.datepicker);
|
|
|
|
|
|
/*
|
|
Renders collection of items
|
|
Behavior uses plain strategy which suits only for relative small datasets
|
|
|
|
*/
|
|
|
|
|
|
webix.RenderStack={
|
|
$init:function(){
|
|
webix.assert(this.data,"RenderStack :: Component doesn't have DataStore");
|
|
webix.assert(webix.template,"webix.template :: webix.template is not accessible");
|
|
|
|
//used for temporary HTML elements
|
|
//automatically nulified during destruction
|
|
this._html = document.createElement("DIV");
|
|
|
|
this.data.attachEvent("onIdChange", webix.bind(this._render_change_id, this));
|
|
this.attachEvent("onItemClick", this._call_onclick);
|
|
|
|
//create copy of default type, and set it as active one
|
|
if (!this.types){
|
|
this.types = { "default" : this.type };
|
|
this.type.name = "default";
|
|
}
|
|
|
|
this.type = webix.clone(this.type);
|
|
},
|
|
|
|
customize:function(obj){
|
|
webix.type(this,obj);
|
|
},
|
|
type_setter:function(value){
|
|
if(!this.types[value])
|
|
this.customize(value);
|
|
else {
|
|
this.type = webix.clone(this.types[value]);
|
|
if (this.type.css)
|
|
this._contentobj.className+=" "+this.type.css;
|
|
}
|
|
if (this.type.on_click)
|
|
webix.extend(this.on_click, this.type.on_click);
|
|
|
|
return value;
|
|
},
|
|
|
|
template_setter:function(value){
|
|
this.type.template=webix.template(value);
|
|
},
|
|
//convert single item to HTML text (templating)
|
|
_toHTML:function(obj){
|
|
var mark = this.data._marks[obj.id];
|
|
//check if related template exist
|
|
webix.assert((!obj.$template || this.type["template"+obj.$template]),"RenderStack :: Unknown template: "+obj.$template);
|
|
this.callEvent("onItemRender",[obj]);
|
|
return this.type.templateStart(obj,this.type, mark)+(obj.$template?this.type["template"+obj.$template]:this.type.template)(obj,this.type,mark)+this.type.templateEnd(obj, this.type,mark);
|
|
},
|
|
//convert item to HTML object (templating)
|
|
_toHTMLObject:function(obj){
|
|
this._html.innerHTML = this._toHTML(obj);
|
|
return this._html.firstChild;
|
|
},
|
|
_render_change_id:function(old, newid){
|
|
var obj = this.getItemNode(old);
|
|
if (obj) {
|
|
obj.setAttribute(this._id, newid);
|
|
this._htmlmap[newid] = this._htmlmap[old];
|
|
delete this._htmlmap[old];
|
|
}
|
|
},
|
|
//calls function that is set in onclick property
|
|
_call_onclick:function(){
|
|
if (this._settings.click){
|
|
var code = webix.toFunctor(this._settings.click, this.$scope);
|
|
if (code && code.call) code.apply(this,arguments);
|
|
}
|
|
},
|
|
//return html container by its ID
|
|
//can return undefined if container doesn't exists
|
|
getItemNode:function(search_id){
|
|
if (this._htmlmap)
|
|
return this._htmlmap[search_id];
|
|
|
|
//fill map if it doesn't created yet
|
|
this._htmlmap={};
|
|
|
|
var t = this._dataobj.childNodes;
|
|
for (var i=0; i < t.length; i++){
|
|
var id = t[i].getAttribute(this._id); //get item's
|
|
if (id)
|
|
this._htmlmap[id]=t[i];
|
|
}
|
|
//call locator again, when map is filled
|
|
return this.getItemNode(search_id);
|
|
},
|
|
//return id of item from html event
|
|
locate:function(e){ return webix.html.locate(e,this._id); },
|
|
/*change scrolling state of top level container, so related item will be in visible part*/
|
|
showItem:function(id){
|
|
|
|
var html = this.getItemNode(id);
|
|
if (html&&this.scrollTo){
|
|
var txmin = Math.abs(this._contentobj.offsetLeft-html.offsetLeft);
|
|
var txmax = txmin + html.offsetWidth;
|
|
var tymin = Math.abs(this._contentobj.offsetTop-html.offsetTop);
|
|
var tymax = tymin + html.offsetHeight;
|
|
var state = this.getScrollState();
|
|
|
|
var x = state.x;
|
|
if (x > txmin || x + this._content_width < txmax )
|
|
x = txmin;
|
|
var y = state.y;
|
|
if (y > tymin || y + this._content_height < tymax )
|
|
y = tymin - 5;
|
|
|
|
this.scrollTo(x,y);
|
|
if(this._setItemActive)
|
|
this._setItemActive(id);
|
|
}
|
|
},
|
|
//update view after data update
|
|
//method calls low-level rendering for related items
|
|
//when called without parameters - all view refreshed
|
|
render:function(id,data,type){
|
|
if (!this.isVisible(this._settings.id) || this.$blockRender)
|
|
return;
|
|
|
|
if (webix.debug_render)
|
|
webix.log("Render: "+this.name+"@"+this._settings.id+", mode:"+(type||"#")+", item:"+(id||"#"));
|
|
|
|
if (id){
|
|
var cont = this.getItemNode(id); //get html element of updated item
|
|
switch(type){
|
|
case "paint":
|
|
case "update":
|
|
//in case of update - replace existing html with updated one
|
|
if (!cont) return;
|
|
var t = this._htmlmap[id] = this._toHTMLObject(data);
|
|
webix.html.insertBefore(t, cont);
|
|
webix.html.remove(cont);
|
|
break;
|
|
case "delete":
|
|
//in case of delete - remove related html
|
|
if (!cont) return;
|
|
webix.html.remove(cont);
|
|
delete this._htmlmap[id];
|
|
break;
|
|
case "add":
|
|
//in case of add - put new html at necessary position
|
|
var t = this._htmlmap[id] = this._toHTMLObject(data);
|
|
webix.html.insertBefore(t, this.getItemNode(this.data.getNextId(id)), this._dataobj);
|
|
break;
|
|
case "move":
|
|
//moving without repainting the item
|
|
webix.html.insertBefore(this.getItemNode(id), this.getItemNode(this.data.getNextId(id)), this._dataobj);
|
|
break;
|
|
default:
|
|
webix.assert_error("Unknown render command: "+type);
|
|
break;
|
|
}
|
|
} else {
|
|
//full reset
|
|
if (this.callEvent("onBeforeRender",[this.data])){
|
|
/*if (this.getScrollState)
|
|
var scroll = this.getScrollState();*/
|
|
|
|
//getRange - returns all elements
|
|
(this._renderobj||this._dataobj).innerHTML = this.data.getRange().map(this._toHTML,this).join("");
|
|
this._htmlmap = null; //clear map, it will be filled at first getItemNode
|
|
this.callEvent("onAfterRender",[]);
|
|
var t = this._dataobj.offsetHeight;
|
|
|
|
/*if (this.getScrollState)
|
|
this.scrollTo(scroll.x, scroll.y);*/
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
webix.ValidateData = {
|
|
$init:function(){
|
|
if(this._events)
|
|
this.attachEvent("onChange",this.clearValidation);
|
|
},
|
|
clearValidation:function(){
|
|
if(this.elements){
|
|
for(var id in this.elements){
|
|
this._clear_invalid(id);
|
|
}
|
|
}
|
|
},
|
|
validate:function(mode, obj) {
|
|
webix.assert(this.callEvent, "using validate for eventless object");
|
|
|
|
this.callEvent("onBeforeValidate", []);
|
|
var failed = this._validate_details = {};
|
|
|
|
//optimistic by default :)
|
|
var result =true;
|
|
var rules = this._settings.rules;
|
|
|
|
var isHidden = this.isVisible && !this.isVisible();
|
|
var validateHidden = mode && mode.hidden;
|
|
var validateDisabled = mode && mode.disabled;
|
|
|
|
//prevent validation of hidden elements
|
|
var elements = {}, hidden = {};
|
|
for(var i in this.elements){
|
|
var name = this.elements[i].config.name;
|
|
//we are ignoring hidden and disabled fields during validation
|
|
//if mode doesn not instruct us otherwise
|
|
//if form itself is hidden, we can't separate hidden fiels,
|
|
//so we will vaidate all fields
|
|
if((isHidden || this.elements[i].isVisible() || validateHidden) && (this.elements[i].isEnabled() || validateDisabled))
|
|
elements[name] = this.elements[i];
|
|
else{
|
|
hidden[name]=true;
|
|
}
|
|
}
|
|
|
|
|
|
if (rules || elements)
|
|
if(!obj && this.getValues)
|
|
obj = this.getValues();
|
|
|
|
if (rules){
|
|
//complex rule, which may chcek all properties of object
|
|
if (rules.$obj)
|
|
result = this._validate(rules.$obj, obj, obj, "") && result;
|
|
|
|
//all - applied to all fields
|
|
var all = rules.$all;
|
|
if (all)
|
|
for (var key in obj){
|
|
if(hidden[key]) continue;
|
|
var subresult = this._validate(all, obj[key], obj, key);
|
|
if (!subresult)
|
|
failed[key] = true;
|
|
result = subresult && result;
|
|
}
|
|
|
|
|
|
//per-field rules
|
|
for (var key in rules){
|
|
if(hidden[key]) continue;
|
|
if (key.indexOf("$")!==0 && !failed[key]){
|
|
webix.assert(rules[key], "Invalid rule for:"+key);
|
|
var subresult = this._validate(rules[key], obj[key], obj, key);
|
|
if (!subresult)
|
|
failed[key] = true;
|
|
result = subresult && result;
|
|
}
|
|
}
|
|
}
|
|
|
|
//check personal validation rules
|
|
if (elements){
|
|
for (var key in elements){
|
|
if (failed[key]) continue;
|
|
|
|
var subview = elements[key];
|
|
if (subview.validate){
|
|
var subresult = subview.validate();
|
|
result = subresult && result;
|
|
if (!subresult)
|
|
failed[key] = true;
|
|
} else {
|
|
var input = subview._settings;
|
|
if (input){ //ignore non webix inputs
|
|
var validator = input.validate;
|
|
if (!validator && input.required)
|
|
validator = webix.rules.isNotEmpty;
|
|
|
|
if (validator){
|
|
var subresult = this._validate(validator, obj[key], obj, key);
|
|
if (!subresult)
|
|
failed[key] = true;
|
|
result = subresult && result;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
this.callEvent("onAfterValidation", [result, this._validate_details]);
|
|
return result;
|
|
},
|
|
_validate:function(rule, data, obj, key){
|
|
if (typeof rule == "string")
|
|
rule = webix.rules[rule];
|
|
if (rule.call(this, data, obj, key)){
|
|
if(this.callEvent("onValidationSuccess",[key, obj]) && this._clear_invalid)
|
|
this._clear_invalid(key);
|
|
return true;
|
|
}
|
|
else {
|
|
if(this.callEvent("onValidationError",[key, obj]) && this._mark_invalid)
|
|
this._mark_invalid(key);
|
|
}
|
|
return false;
|
|
}
|
|
};
|
|
|
|
|
|
webix.ValidateCollection = {
|
|
_validate_init_once:function(){
|
|
this.data.attachEvent("onStoreUpdated",webix.bind(function(id, data, mode){
|
|
if (id && (mode == "add" || mode == "update"))
|
|
this.validate(id);
|
|
}, this));
|
|
this.data.attachEvent("onClearAll",webix.bind(this.clearValidation, this));
|
|
|
|
this._validate_init_once = function(){};
|
|
},
|
|
rules_setter:function(value){
|
|
if (value){
|
|
this._validate_init_once();
|
|
}
|
|
return value;
|
|
},
|
|
clearValidation:function(){
|
|
this.data.clearMark("webix_invalid", true);
|
|
},
|
|
validate:function(id){
|
|
var result = true;
|
|
if (!id)
|
|
for (var key in this.data.pull)
|
|
var result = this.validate(key) && result;
|
|
else {
|
|
this._validate_details = {};
|
|
var obj = this.getItem(id);
|
|
result = webix.ValidateData.validate.call(this, null, obj);
|
|
if (result){
|
|
if (this.callEvent("onValidationSuccess",[id, obj]))
|
|
this._clear_invalid(id);
|
|
} else {
|
|
if (this.callEvent("onValidationError",[id, obj, this._validate_details]))
|
|
this._mark_invalid(id, this._validate_details);
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
_validate:function(rule, data, obj, key){
|
|
if (typeof rule == "string")
|
|
rule = webix.rules[rule];
|
|
|
|
var res = rule.call(this, data, obj, key);
|
|
if (!res){
|
|
this._validate_details[key] = true;
|
|
}
|
|
return res;
|
|
},
|
|
_clear_invalid:function(id){
|
|
this.data.removeMark(id, "webix_invalid", true);
|
|
},
|
|
_mark_invalid:function(id, details){
|
|
this.data.addMark(id, "webix_invalid", true);
|
|
}
|
|
};
|
|
|
|
|
|
webix.rules = {
|
|
isEmail: function(value){
|
|
return (/^[^@]+@[^@]+\.[^@]+$/).test((value || "").toString());
|
|
},
|
|
isNumber: function(value){
|
|
return (parseFloat(value) == value);
|
|
},
|
|
isChecked: function(value){
|
|
return (!!value) || value === "0";
|
|
},
|
|
isNotEmpty: function(value){
|
|
return (value === 0 || value);
|
|
}
|
|
};
|
|
/*Data collection mapping logic */
|
|
|
|
webix.MapCollection = {
|
|
$init:function(){
|
|
this.$ready.push(this._create_scheme_init);
|
|
this.attachEvent("onStructureUpdate", this._create_scheme_init);
|
|
},
|
|
_create_scheme_init:function(order){
|
|
var order = this._scheme_init_order = [];
|
|
var config = this._settings;
|
|
|
|
if (config.columns)
|
|
this._build_data_map(config.columns);
|
|
if (this._settings.map)
|
|
this._process_field_map(config.map);
|
|
|
|
if (this._scheme_init_order.length){
|
|
try {
|
|
this.data._scheme_init = Function("obj",order.join("\n"));
|
|
} catch(e){
|
|
webix.assert_error("Invalid data map:"+order.join("\n"));
|
|
}
|
|
}
|
|
},
|
|
_process_field_map:function(set){
|
|
for (var key in set)
|
|
this._scheme_init_order.push(this._process_single_map(key, set[key]));
|
|
},
|
|
_process_single_map:function(id, map, extra){
|
|
var start = "";
|
|
var end = "";
|
|
|
|
if (map.indexOf("(date)")===0){
|
|
start = "webix.i18n.parseFormatDate("; end=")";
|
|
if (extra && !extra.format) extra.format = webix.i18n.dateFormatStr;
|
|
map = map.replace("(date)","");
|
|
} else if (map.indexOf("(number)")===0){
|
|
start = "("; end=")*1";
|
|
map = map.replace("(number)","");
|
|
}
|
|
|
|
if (map !== ""){
|
|
map=map.replace(/\{obj\.([^}]*)\}/g,"\"+(obj.$1||'')+\"");
|
|
map=map.replace(/#([^#'";, ]+)#/gi,"\"+(obj.$1||'')+\"");
|
|
} else
|
|
map = "\"+(obj."+id+"||'')+\"";
|
|
|
|
|
|
return "obj."+id+" = "+start+'"'+map+'"'+end+";";
|
|
},
|
|
_build_data_map:function(columns){ //for datatable
|
|
for (var i=0; i<columns.length; i++){
|
|
var map = columns[i].map;
|
|
var id = columns[i].id;
|
|
if (!id) {
|
|
id = columns[i].id = "i"+webix.uid();
|
|
if (!columns[i].header)
|
|
columns[i].header = "";
|
|
}
|
|
if (map)
|
|
this._scheme_init_order.push(this._process_single_map(id, map, columns[i]));
|
|
|
|
this._map_options(columns[i]);
|
|
}
|
|
},
|
|
_map_options:function(element){
|
|
var options = element.options||element.collection;
|
|
if(options){
|
|
if (typeof options === "string"){
|
|
//id of some other view
|
|
var options_view = webix.$$(options);
|
|
//or url
|
|
if (!options_view){
|
|
options_view = new webix.DataCollection({ url: options });
|
|
this._destroy_with_me.push(options_view);
|
|
}
|
|
//if it was a view, special check for suggests
|
|
if (options_view.getBody) options_view = options_view.getBody();
|
|
this._bind_collection(options_view, element);
|
|
} else if (!options.loadNext){
|
|
if (options[0] && typeof options[0] == "object"){
|
|
//[{ id:1, value:"one"}, ...]
|
|
options = new webix.DataCollection({ data:options });
|
|
this._bind_collection(options, element);
|
|
this._destroy_with_me.push(options);
|
|
} else {
|
|
//["one", "two"]
|
|
//or
|
|
//{ 1: "one", 2: "two"}
|
|
if (webix.isArray(options)){
|
|
var data = {};
|
|
for (var ij=0; ij<options.length; ij++) data[options[ij]] = options[ij];
|
|
element.options = options = data;
|
|
}
|
|
element.template = element.template || this._collection_accesser(options, element.id, element.optionslist);
|
|
}
|
|
} else {
|
|
//data collection or view
|
|
this._bind_collection(options, element);
|
|
}
|
|
}
|
|
},
|
|
_bind_collection:function(options, element){
|
|
if (element){
|
|
delete element.options;
|
|
element.collection = options;
|
|
element.template = element.template || this._bind_accesser(options, element.id, element.optionslist);
|
|
var id = options.data.attachEvent("onStoreUpdated", webix.bind(function(){
|
|
this.refresh();
|
|
this.refreshFilter(element.id);
|
|
}, this));
|
|
this.attachEvent("onDestruct", function(){
|
|
if (!options.$destructed) options.data.detachEvent(id);
|
|
});
|
|
}
|
|
},
|
|
_collection_accesser:function(options, id, multi){
|
|
if (multi){
|
|
var separator = typeof multi=="string"?multi:",";
|
|
return function(obj, common){
|
|
var value = obj[id] || obj.value;
|
|
if (!value) return "";
|
|
var ids = value.split(separator);
|
|
for (var i = 0; i < ids.length; i++)
|
|
ids[i] = options[ids[i]] || "";
|
|
|
|
return ids.join(", ");
|
|
};
|
|
} else {
|
|
return function(obj, common){
|
|
return options[obj[id]]||obj.value||"";
|
|
};
|
|
}
|
|
},
|
|
_bind_accesser:function(col, id, multi){
|
|
if (multi) {
|
|
var separator = typeof multi=="string"?multi:",";
|
|
return function(obj, common){
|
|
var value = obj[id] || obj.value;
|
|
if (!value) return "";
|
|
|
|
var ids = value.split(separator);
|
|
for (var i = 0; i < ids.length; i++){
|
|
var data = col.data.pull[ids[i]];
|
|
ids[i] = data ? (data.value || "") : "";
|
|
}
|
|
|
|
return ids.join(", ");
|
|
};
|
|
} else {
|
|
return function(obj, common){
|
|
var prop = obj[id]||obj.value,
|
|
data = col.data.pull[prop];
|
|
if (data && (data.value || data.value ===0))
|
|
return data.value;
|
|
return "";
|
|
};
|
|
}
|
|
}
|
|
};
|
|
|
|
/*
|
|
Behavior:DataLoader - load data in the component
|
|
|
|
@export
|
|
load
|
|
parse
|
|
*/
|
|
webix.DataLoader=webix.proto({
|
|
$init:function(config){
|
|
//prepare data store
|
|
config = config || "";
|
|
|
|
//list of all active ajax requests
|
|
this._ajax_queue = webix.toArray();
|
|
|
|
this.data = new webix.DataStore();
|
|
this.data.attachEvent("onClearAll",webix.bind(this._call_onclearall,this));
|
|
this.data.attachEvent("onServerConfig", webix.bind(this._call_on_config, this));
|
|
this.data.feed = this._feed;
|
|
this.data.owner = config.id;
|
|
},
|
|
_feed:function(from,count,callback){
|
|
//allow only single request at same time
|
|
if (this._load_count)
|
|
return (this._load_count=[from,count,callback]); //save last ignored request
|
|
else
|
|
this._load_count=true;
|
|
this._feed_last = [from, count];
|
|
this._feed_common.call(this, from, count, callback);
|
|
},
|
|
_feed_common:function(from, count, callback, url, details){
|
|
var state = null,
|
|
url = url || this.data.url;
|
|
|
|
var final_callback = [
|
|
{ success: this._feed_callback, error: this._feed_callback },
|
|
callback
|
|
];
|
|
|
|
if (from<0) from = 0;
|
|
|
|
if(!details)
|
|
details = { start: from, count:count };
|
|
|
|
if(this.count())
|
|
details["continue"] = "true";
|
|
|
|
if (this.getState)
|
|
state = this.getState();
|
|
|
|
// proxy
|
|
if (url && typeof url != "string"){
|
|
if (state){
|
|
if (state.sort)
|
|
details.sort = state.sort;
|
|
if (state.filter)
|
|
details.filter = state.filter;
|
|
}
|
|
this.load(url, final_callback, details);
|
|
} else { // GET
|
|
url = url+((url.indexOf("?")==-1)?"?":"&");
|
|
|
|
var params = [];
|
|
for(var d in details){
|
|
params.push(d+"="+details[d]);
|
|
}
|
|
if (state){
|
|
if (state.sort)
|
|
params.push("sort["+state.sort.id+"]="+encodeURIComponent(state.sort.dir));
|
|
if (state.filter)
|
|
for (var key in state.filter)
|
|
params.push("filter["+key+"]="+encodeURIComponent(state.filter[key]));
|
|
}
|
|
|
|
url += params.join("&");
|
|
|
|
this.load(url, final_callback);
|
|
}
|
|
},
|
|
_feed_callback:function(){
|
|
//after loading check if we have some ignored requests
|
|
var temp = this._load_count;
|
|
var last = this._feed_last;
|
|
this._load_count = false;
|
|
if (typeof temp =="object" && (temp[0]!=last[0] || temp[1]!=last[1]))
|
|
this.data.feed.apply(this, temp); //load last ignored request
|
|
},
|
|
//loads data from external URL
|
|
load:function(url,call){
|
|
var url = webix.proxy.$parse(url);
|
|
var ajax = webix.AtomDataLoader.load.apply(this, arguments);
|
|
|
|
//prepare data feed for dyn. loading
|
|
if (!this.data.url)
|
|
this.data.url = url;
|
|
|
|
return ajax;
|
|
},
|
|
//load next set of data rows
|
|
loadNext:function(count, start, callback, url, now){
|
|
var config = this._settings;
|
|
if (config.datathrottle && !now){
|
|
if (this._throttle_request)
|
|
window.clearTimeout(this._throttle_request);
|
|
this._throttle_request = webix.delay(function(){
|
|
this.loadNext(count, start, callback, url, true);
|
|
},this, 0, config.datathrottle);
|
|
return;
|
|
}
|
|
|
|
if (!start && start !== 0) start = this.count();
|
|
if (!count)
|
|
count = config.datafetch || this.count();
|
|
|
|
this.data.url = this.data.url || url;
|
|
if (this.callEvent("onDataRequest", [start,count,callback,url]) && this.data.url)
|
|
this.data.feed.call(this, start, count, callback);
|
|
},
|
|
_maybe_loading_already:function(count, from){
|
|
var last = this._feed_last;
|
|
if(this._load_count && last){
|
|
if (last[0]<=from && (last[1]+last[0] >= count + from )) return true;
|
|
}
|
|
return false;
|
|
},
|
|
removeMissed_setter:function(value){
|
|
return (this.data._removeMissed = value);
|
|
},
|
|
//init of dataprocessor delayed after all settings processing
|
|
//because it need to be the last in the event processing chain
|
|
//to get valid validation state
|
|
_init_dataprocessor:function(){
|
|
var url = this._settings.save;
|
|
|
|
if (url === true)
|
|
url = this._settings.save = this._settings.url;
|
|
|
|
var obj = { master: this };
|
|
|
|
if (url && url.url)
|
|
webix.extend(obj, url);
|
|
else
|
|
obj.url = url;
|
|
|
|
webix.dp(obj);
|
|
},
|
|
save_setter:function(value){
|
|
if (value)
|
|
this.$ready.push(this._init_dataprocessor);
|
|
|
|
return value;
|
|
},
|
|
scheme_setter:function(value){
|
|
this.data.scheme(value);
|
|
},
|
|
dataFeed_setter:function(value){
|
|
value = webix.proxy.$parse(value);
|
|
|
|
this.data.attachEvent("onBeforeFilter", webix.bind(function(text, filtervalue){
|
|
//complex filtering, can't be routed to dataFeed
|
|
if (typeof text == "function") return true;
|
|
|
|
//we have dataFeed and some text
|
|
if (this._settings.dataFeed && (text || filtervalue)){
|
|
text = text || "id";
|
|
if (filtervalue && typeof filtervalue == "object")
|
|
filtervalue = filtervalue.id;
|
|
|
|
this.clearAll();
|
|
var url = this._settings.dataFeed;
|
|
|
|
//js data feed
|
|
if (typeof url == "function"){
|
|
var filter = {};
|
|
filter[text] = filtervalue;
|
|
url.call(this, filtervalue, filter);
|
|
} else if (url.$proxy) {
|
|
if (url.load){
|
|
var filterobj = {}; filterobj[text] = filtervalue;
|
|
url.load(this, {
|
|
success: this._onLoad,
|
|
error: this._onLoadError
|
|
}, { filter: filterobj });
|
|
}
|
|
} else {
|
|
//url data feed
|
|
var urldata = "filter["+text+"]="+encodeURIComponent(filtervalue);
|
|
this.load(url+(url.indexOf("?")<0?"?":"&")+urldata, this._settings.datatype);
|
|
}
|
|
return false;
|
|
}
|
|
},this));
|
|
return value;
|
|
},
|
|
_call_onready:function(){
|
|
if (this._settings.ready && !this._ready_was_used){
|
|
var code = webix.toFunctor(this._settings.ready, this.$scope);
|
|
if (code)
|
|
webix.delay(code, this, arguments);
|
|
this._ready_was_used = true;
|
|
}
|
|
},
|
|
_call_onclearall:function(){
|
|
for (var i = 0; i < this._ajax_queue.length; i++){
|
|
var xhr = this._ajax_queue[i];
|
|
|
|
//IE9 and IE8 deny extending of ActiveX wrappers
|
|
try { xhr.aborted = true; } catch(e){
|
|
webix._xhr_aborted.push(xhr);
|
|
}
|
|
xhr.abort();
|
|
}
|
|
|
|
this._ajax_queue = webix.toArray();
|
|
this.waitData = webix.promise.defer();
|
|
},
|
|
_call_on_config:function(config){
|
|
this._parseSeetingColl(config);
|
|
}
|
|
},webix.AtomDataLoader);
|
|
|
|
//ie8 compatibility
|
|
webix._xhr_aborted = webix.toArray();
|
|
|
|
webix.DataMarks = {
|
|
addCss:function(id, css, silent){
|
|
if (!this.addRowCss && !silent){
|
|
if (!this.hasCss(id, css)){
|
|
var node = this.getItemNode(id);
|
|
if (node){
|
|
node.className += " "+css;
|
|
silent = true;
|
|
}
|
|
}
|
|
}
|
|
return this.data.addMark(id, css, 1, 1, silent);
|
|
},
|
|
removeCss:function(id, css, silent){
|
|
if (!this.addRowCss && !silent){
|
|
if (this.hasCss(id, css)){
|
|
var node = this.getItemNode(id);
|
|
if (node){
|
|
node.className = node.className.replace(css,"").replace(" "," ");
|
|
silent = true;
|
|
}
|
|
}
|
|
}
|
|
return this.data.removeMark(id, css, 1, silent);
|
|
},
|
|
hasCss:function(id, mark){
|
|
return this.data.getMark(id, mark);
|
|
},
|
|
clearCss:function(css, silent){
|
|
return this.data.clearMark(css, 1, silent);
|
|
}
|
|
};
|
|
|
|
/*
|
|
DataStore is not a behavior, it standalone object, which represents collection of data.
|
|
Call provideAPI to map data API
|
|
|
|
@export
|
|
exists
|
|
getIdByIndex
|
|
getIndexById
|
|
get
|
|
set
|
|
refresh
|
|
count
|
|
sort
|
|
filter
|
|
next
|
|
previous
|
|
clearAll
|
|
first
|
|
last
|
|
*/
|
|
webix.DataStore = function(){
|
|
this.name = "DataStore";
|
|
|
|
webix.extend(this, webix.EventSystem);
|
|
|
|
this.setDriver("json"); //default data source is an
|
|
this.pull = {}; //hash of IDs
|
|
this.order = webix.toArray(); //order of IDs
|
|
this._marks = {};
|
|
};
|
|
|
|
webix.DataStore.prototype={
|
|
//defines type of used data driver
|
|
//data driver is an abstraction other different data formats - xml, json, csv, etc.
|
|
setDriver:function(type){
|
|
webix.assert(webix.DataDriver[type],"incorrect DataDriver");
|
|
this.driver = webix.DataDriver[type];
|
|
},
|
|
//process incoming raw data
|
|
_parse:function(data,master){
|
|
this.callEvent("onParse", [this.driver, data]);
|
|
|
|
if (this._filter_order)
|
|
this.filter();
|
|
|
|
//get size and position of data
|
|
var info = this.driver.getInfo(data);
|
|
|
|
//generated by connectors only
|
|
if (info._key)
|
|
webix.securityKey = info._key;
|
|
|
|
if (info._config)
|
|
this.callEvent("onServerConfig",[info._config]);
|
|
|
|
var options = this.driver.getOptions(data);
|
|
if (options)
|
|
this.callEvent("onServerOptions", [options]);
|
|
|
|
//get array of records
|
|
var recs = this.driver.getRecords(data);
|
|
|
|
this._inner_parse(info, recs);
|
|
|
|
//in case of tree store we may want to group data
|
|
if (this._scheme_group && this._group_processing && !this._not_grouped_order)
|
|
this._group_processing(this._scheme_group);
|
|
|
|
//optional data sorting
|
|
if (this._scheme_sort){
|
|
this.blockEvent();
|
|
this.sort(this._scheme_sort);
|
|
this.unblockEvent();
|
|
}
|
|
|
|
this.callEvent("onStoreLoad",[this.driver, data]);
|
|
//repaint self after data loading
|
|
this.refresh();
|
|
},
|
|
_inner_parse:function(info, recs){
|
|
var from = (info._from||0)*1;
|
|
var subload = true;
|
|
var marks = false;
|
|
|
|
if (from === 0 && this.order[0] && this.order[this.order.length-1]){ //update mode
|
|
if (this._removeMissed){
|
|
//update mode, create kill list
|
|
marks = {};
|
|
for (var i=0; i<this.order.length; i++)
|
|
marks[this.order[i]]=true;
|
|
}
|
|
|
|
subload = false;
|
|
from = this.order.length;
|
|
}
|
|
|
|
var j=0;
|
|
for (var i=0; i<recs.length; i++){
|
|
//get hash of details for each record
|
|
var temp = this.driver.getDetails(recs[i]);
|
|
var id = this.id(temp); //generate ID for the record
|
|
if (!this.pull[id]){ //if such ID already exists - update instead of insert
|
|
this.order[j+from]=id;
|
|
j++;
|
|
} else if (subload && this.order[j+from])
|
|
j++;
|
|
|
|
if(this.pull[id]){
|
|
webix.extend(this.pull[id],temp,true);//add only new properties
|
|
if (this._scheme_update)
|
|
this._scheme_update(this.pull[id]);
|
|
//update mode, remove item from kill list
|
|
if (marks)
|
|
delete marks[id];
|
|
} else{
|
|
this.pull[id] = temp;
|
|
if (this._scheme_init)
|
|
this._scheme_init(temp);
|
|
}
|
|
|
|
}
|
|
|
|
//update mode, delete items which are not existing in the new xml
|
|
if (marks){
|
|
this.blockEvent();
|
|
for (var delid in marks)
|
|
this.remove(delid);
|
|
this.unblockEvent();
|
|
}
|
|
|
|
if (!this.order[info._size-1])
|
|
this.order[info._size-1] = webix.undefined;
|
|
},
|
|
//generate id for data object
|
|
id:function(data){
|
|
return data.id||(data.id=webix.uid());
|
|
},
|
|
changeId:function(old, newid){
|
|
//webix.assert(this.pull[old],"Can't change id, for non existing item: "+old);
|
|
if(this.pull[old])
|
|
this.pull[newid] = this.pull[old];
|
|
|
|
this.pull[newid].id = newid;
|
|
this.order[this.order.find(old)]=newid;
|
|
if (this._filter_order)
|
|
this._filter_order[this._filter_order.find(old)]=newid;
|
|
if (this._marks[old]){
|
|
this._marks[newid] = this._marks[old];
|
|
delete this._marks[old];
|
|
}
|
|
|
|
|
|
this.callEvent("onIdChange", [old, newid]);
|
|
if (this._render_change_id)
|
|
this._render_change_id(old, newid);
|
|
delete this.pull[old];
|
|
},
|
|
//get data from hash by id
|
|
getItem:function(id){
|
|
return this.pull[id];
|
|
},
|
|
//assigns data by id
|
|
updateItem:function(id, update){
|
|
var data = this.getItem(id);
|
|
webix.assert(data, "Ivalid ID for updateItem");
|
|
webix.assert(!update || !update.id || update.id == id, "Attempt to change ID in updateItem");
|
|
|
|
if (!webix.isUndefined(update) && data !== update){
|
|
webix.extend(data, update, true);
|
|
data.id = id;
|
|
}
|
|
|
|
if (this._scheme_update)
|
|
this._scheme_update(data);
|
|
|
|
this.callEvent("onStoreUpdated",[id, data, "update"]);
|
|
this.callEvent("onDataUpdate", [id, data]);
|
|
},
|
|
//sends repainting signal
|
|
refresh:function(id){
|
|
if (this._skip_refresh) return;
|
|
|
|
if (id){
|
|
if (this.exists(id))
|
|
this.callEvent("onStoreUpdated",[id, this.pull[id], "paint"]);
|
|
}else
|
|
this.callEvent("onStoreUpdated",[null,null,null]);
|
|
},
|
|
silent:function(code, master){
|
|
this._skip_refresh = true;
|
|
code.call(master||this);
|
|
this._skip_refresh = false;
|
|
},
|
|
//converts range IDs to array of all IDs between them
|
|
getRange:function(from,to){
|
|
//if some point is not defined - use first or last id
|
|
//BEWARE - do not use empty or null ID
|
|
if (from)
|
|
from = this.getIndexById(from);
|
|
else
|
|
from = (this.$min||this.startOffset)||0;
|
|
if (to)
|
|
to = this.getIndexById(to);
|
|
else {
|
|
to = this.$max === 0 ? 0 : Math.min((this.$max?this.$max-1:(this.endOffset||Infinity)),(this.count()-1));
|
|
if (to<0) to = 0; //we have not data in the store
|
|
}
|
|
|
|
if (from>to){ //can be in case of backward shift-selection
|
|
var a=to; to=from; from=a;
|
|
}
|
|
|
|
return this.getIndexRange(from,to);
|
|
},
|
|
//converts range of indexes to array of all IDs between them
|
|
getIndexRange:function(from,to){
|
|
to=Math.min((to === 0 ? 0 :(to||Infinity)),this.count()-1);
|
|
|
|
var ret=webix.toArray(); //result of method is rich-array
|
|
for (var i=(from||0); i <= to; i++)
|
|
ret.push(this.getItem(this.order[i]));
|
|
return ret;
|
|
},
|
|
//returns total count of elements
|
|
count:function(){
|
|
return this.order.length;
|
|
},
|
|
//returns truy if item with such ID exists
|
|
exists:function(id){
|
|
return !!(this.pull[id]);
|
|
},
|
|
//nextmethod is not visible on component level, check DataMove.move
|
|
//moves item from source index to the target index
|
|
move:function(sindex,tindex){
|
|
webix.assert(sindex>=0 && tindex>=0, "DataStore::move","Incorrect indexes");
|
|
if (sindex == tindex) return;
|
|
|
|
var id = this.getIdByIndex(sindex);
|
|
var obj = this.getItem(id);
|
|
|
|
if (this._filter_order)
|
|
this._move_inner(this._filter_order, 0, 0, this.getIdByIndex(sindex), this.getIdByIndex(tindex));
|
|
|
|
this._move_inner(this.order, sindex, tindex);
|
|
|
|
|
|
//repaint signal
|
|
this.callEvent("onStoreUpdated",[id,obj,"move"]);
|
|
},
|
|
_move_inner:function(col, sindex, tindex, sid, tid){
|
|
if (sid||tid){
|
|
sindex = tindex = -1;
|
|
for (var i=0; i<col.length; i++){
|
|
if (col[i] == sid && sindex<0)
|
|
sindex = i;
|
|
if (col[i] == tid && tindex<0)
|
|
tindex = i;
|
|
}
|
|
}
|
|
var id = col[sindex];
|
|
col.removeAt(sindex); //remove at old position
|
|
col.insertAt(id,Math.min(col.length, tindex)); //insert at new position
|
|
},
|
|
scheme:function(config){
|
|
this._scheme = {};
|
|
this._scheme_save = config.$save;
|
|
this._scheme_init = config.$init||config.$change;
|
|
this._scheme_update = config.$update||config.$change;
|
|
this._scheme_serialize = config.$serialize;
|
|
this._scheme_group = config.$group;
|
|
this._scheme_sort = config.$sort;
|
|
|
|
//ignore $-starting properties, as they have special meaning
|
|
for (var key in config)
|
|
if (key.substr(0,1) != "$")
|
|
this._scheme[key] = config[key];
|
|
},
|
|
importData:function(target, silent){
|
|
var data = target ? (target.data || target) : [];
|
|
this._filter_order = null;
|
|
|
|
if (typeof data.serialize == "function"){
|
|
this.order = webix.toArray([].concat(data.order));
|
|
this.pull = data.pull;
|
|
if (data.branch && this.branch){
|
|
this.branch = webix.copy(data.branch);
|
|
this._filter_branch = null;
|
|
}
|
|
|
|
} else {
|
|
this.order = webix.toArray();
|
|
this.pull = {};
|
|
var id, obj;
|
|
|
|
if (webix.isArray(target))
|
|
for (var key=0; key<target.length; key++){
|
|
obj = id = target[key];
|
|
if (typeof obj == "object")
|
|
id = obj.id || webix.uid();
|
|
else
|
|
obj = { id:id, value:id };
|
|
|
|
this.order.push(obj.id);
|
|
if (this._scheme_init)
|
|
this._scheme_init(obj);
|
|
this.pull[obj.id] = obj;
|
|
}
|
|
else
|
|
for (var key in data){
|
|
this.order.push(key);
|
|
this.pull[key] = { id:key, value: data[key] };
|
|
}
|
|
}
|
|
if (this._extraParser && !data.branch){
|
|
this.branch = { 0:[]};
|
|
if (!this._datadriver_child)
|
|
this._set_child_scheme("data");
|
|
|
|
for (var i = 0; i<this.order.length; i++){
|
|
var key = this.order[i];
|
|
this._extraParser(this.pull[key], 0, 0, false);
|
|
}
|
|
}
|
|
|
|
this.callEvent("onStoreLoad",[]);
|
|
if (!silent)
|
|
this.callEvent("onStoreUpdated",[]);
|
|
},
|
|
sync:function(source, filter, silent){
|
|
var type = typeof source;
|
|
if (type == "string")
|
|
source = webix.$$("source");
|
|
|
|
if (type != "function" && type != "object"){
|
|
silent = filter;
|
|
filter = null;
|
|
}
|
|
|
|
if (webix.debug_bind){
|
|
this.debug_sync_master = source;
|
|
webix.log("[sync] "+this.debug_bind_master.name+"@"+this.debug_bind_master._settings.id+" <= "+this.debug_sync_master.name+"@"+this.debug_sync_master._settings.id);
|
|
}
|
|
|
|
if (source.name != "DataStore"){
|
|
if (source.data && (source.data.name === "DataStore" || source.data.name === "TreeStore"))
|
|
source = source.data;
|
|
else {
|
|
this._sync_source = source;
|
|
return webix.callEvent("onSyncUnknown", [this, source, filter]);
|
|
}
|
|
}
|
|
|
|
var sync_logic = webix.bind(function(mode, record, data){
|
|
if (this._skip_next_sync) return;
|
|
|
|
this.importData(source, true);
|
|
|
|
if (filter)
|
|
this.silent(filter);
|
|
if (this._on_sync)
|
|
this._on_sync();
|
|
|
|
if (webix.debug_bind)
|
|
webix.log("[sync:request] "+this.debug_sync_master.name+"@"+this.debug_sync_master._settings.id + " <= "+this.debug_bind_master.name+"@"+this.debug_bind_master._settings.id);
|
|
|
|
this.callEvent("onSyncApply",[]);
|
|
|
|
if (!silent)
|
|
this.refresh();
|
|
else
|
|
silent = false;
|
|
}, this);
|
|
|
|
|
|
|
|
this._sync_events = [
|
|
source.attachEvent("onStoreUpdated", sync_logic),
|
|
source.attachEvent("onIdChange", webix.bind(function(old, nid){ this.changeId(old, nid); this.refresh(nid); }, this))
|
|
];
|
|
this._sync_source = source;
|
|
|
|
//backward data saving
|
|
this._back_sync_handler = this.attachEvent("onStoreUpdated", function(id, data, mode){
|
|
if (mode == "update" || mode == "save"){
|
|
this._skip_next_sync = 1;
|
|
source.updateItem(id, data);
|
|
this._skip_next_sync = 0;
|
|
}
|
|
});
|
|
|
|
sync_logic();
|
|
},
|
|
unsync:function(){
|
|
if (this._sync_source){
|
|
var source = this._sync_source;
|
|
|
|
if (source.name != "DataStore" &&
|
|
(!source.data || source.data.name != "DataStore")){
|
|
//data sync with external component
|
|
webix.callEvent("onUnSyncUnknown", [this, source]);
|
|
} else {
|
|
//data sync with webix component
|
|
for (var i = 0; i < this._sync_events.length; i++)
|
|
source.detachEvent(this._sync_events[i]);
|
|
this.detachEvent(this._back_sync_handler);
|
|
}
|
|
|
|
this._sync_source = null;
|
|
}
|
|
},
|
|
destructor:function(){
|
|
this.unsync();
|
|
|
|
this.pull = this.order = this._marks = null;
|
|
this._evs_events = this._evs_handlers = {};
|
|
},
|
|
//adds item to the store
|
|
add:function(obj,index){
|
|
//default values
|
|
if (this._scheme)
|
|
for (var key in this._scheme)
|
|
if (webix.isUndefined(obj[key]))
|
|
obj[key] = this._scheme[key];
|
|
|
|
if (this._scheme_init)
|
|
this._scheme_init(obj);
|
|
|
|
//generate id for the item
|
|
var id = this.id(obj);
|
|
|
|
//in case of treetable order is sent as 3rd parameter
|
|
var order = arguments[2]||this.order;
|
|
|
|
//by default item is added to the end of the list
|
|
var data_size = order.length;
|
|
|
|
if (webix.isUndefined(index) || index < 0)
|
|
index = data_size;
|
|
//check to prevent too big indexes
|
|
if (index > data_size){
|
|
webix.log("Warning","DataStore:add","Index of out of bounds");
|
|
index = Math.min(order.length,index);
|
|
}
|
|
if (this.callEvent("onBeforeAdd", [id, obj, index]) === false) return false;
|
|
|
|
webix.assert(!this.exists(id), "Not unique ID");
|
|
|
|
this.pull[id]=obj;
|
|
order.insertAt(id,index);
|
|
if (this._filter_order){ //adding during filtering
|
|
//we can't know the location of new item in full dataset, making suggestion
|
|
//put at end of original dataset by default
|
|
var original_index = this._filter_order.length;
|
|
//if some data exists, put at the same position in original and filtered lists
|
|
if (this.order.length)
|
|
original_index = Math.min((index || 0), original_index);
|
|
|
|
this._filter_order.insertAt(id,original_index);
|
|
}
|
|
|
|
//repaint signal
|
|
this.callEvent("onStoreUpdated",[id,obj,"add"]);
|
|
this.callEvent("onAfterAdd",[id,index]);
|
|
|
|
return obj.id;
|
|
},
|
|
|
|
//removes element from datastore
|
|
remove:function(id){
|
|
//id can be an array of IDs - result of getSelect, for example
|
|
if (webix.isArray(id)){
|
|
for (var i=0; i < id.length; i++)
|
|
this.remove(id[i]);
|
|
return;
|
|
}
|
|
if (this.callEvent("onBeforeDelete",[id]) === false) return false;
|
|
|
|
webix.assert(this.exists(id), "Not existing ID in remove command"+id);
|
|
|
|
var obj = this.getItem(id); //save for later event
|
|
//clear from collections
|
|
this.order.remove(id);
|
|
if (this._filter_order)
|
|
this._filter_order.remove(id);
|
|
|
|
delete this.pull[id];
|
|
if (this._marks[id])
|
|
delete this._marks[id];
|
|
|
|
//repaint signal
|
|
this.callEvent("onStoreUpdated",[id,obj,"delete"]);
|
|
this.callEvent("onAfterDelete",[id]);
|
|
},
|
|
//deletes all records in datastore
|
|
clearAll:function(){
|
|
//instead of deleting one by one - just reset inner collections
|
|
this.pull = {};
|
|
this._marks = {};
|
|
this.order = webix.toArray();
|
|
//this.feed = null;
|
|
this._filter_order = this.url = null;
|
|
this.callEvent("onClearAll",[]);
|
|
this.refresh();
|
|
},
|
|
//converts id to index
|
|
getIdByIndex:function(index){
|
|
webix.assert(index >= 0,"DataStore::getIdByIndex Incorrect index");
|
|
return this.order[index];
|
|
},
|
|
//converts index to id
|
|
getIndexById:function(id){
|
|
var res = this.order.find(id); //slower than getIdByIndex
|
|
if (!this.pull[id])
|
|
return -1;
|
|
|
|
return res;
|
|
},
|
|
//returns ID of next element
|
|
getNextId:function(id,step){
|
|
return this.order[this.getIndexById(id)+(step||1)];
|
|
},
|
|
//returns ID of first element
|
|
getFirstId:function(){
|
|
return this.order[0];
|
|
},
|
|
//returns ID of last element
|
|
getLastId:function(){
|
|
return this.order[this.order.length-1];
|
|
},
|
|
//returns ID of previous element
|
|
getPrevId:function(id,step){
|
|
return this.order[this.getIndexById(id)-(step||1)];
|
|
},
|
|
/*
|
|
sort data in collection
|
|
by - settings of sorting
|
|
|
|
or
|
|
|
|
by - sorting function
|
|
dir - "asc" or "desc"
|
|
|
|
or
|
|
|
|
by - property
|
|
dir - "asc" or "desc"
|
|
as - type of sortings
|
|
|
|
Sorting function will accept 2 parameters and must return 1,0,-1, based on desired order
|
|
*/
|
|
sort:function(by, dir, as){
|
|
var sort = by;
|
|
if (typeof by == "function")
|
|
sort = {as:by, dir:dir};
|
|
else if (typeof by == "string")
|
|
sort = {by:by.replace(/#/g,""), dir:dir, as:as};
|
|
|
|
|
|
var parameters = [sort.by, sort.dir, sort.as, sort];
|
|
if (!this.callEvent("onBeforeSort",parameters)) return;
|
|
|
|
this.order = this._sort_core(sort, this.order);
|
|
if (this._filter_order && this._filter_order.length != this.order.length)
|
|
this._filter_order = this._sort_core(sort, this._filter_order);
|
|
|
|
//repaint self
|
|
this.refresh();
|
|
|
|
this.callEvent("onAfterSort",parameters);
|
|
},
|
|
_sort_core:function(sort, order){
|
|
var sorter = this.sorting.create(sort);
|
|
if (this.order.length){
|
|
//get array of IDs
|
|
var neworder = webix.toArray();
|
|
for (var i=order.length-1; i>=0; i--)
|
|
neworder[i] = this.pull[order[i]];
|
|
|
|
neworder.sort(sorter);
|
|
return webix.toArray(neworder.map(function(obj){
|
|
webix.assert(obj, "Client sorting can't be used with dynamic loading");
|
|
return this.id(obj);
|
|
},this));
|
|
}
|
|
return order;
|
|
},
|
|
/*
|
|
Filter datasource
|
|
|
|
text - property, by which filter
|
|
value - filter mask
|
|
|
|
or
|
|
|
|
text - filter method
|
|
|
|
Filter method will receive data object and must return true or false
|
|
*/
|
|
_filter_reset:function(preserve){
|
|
//remove previous filtering , if any
|
|
if (this._filter_order && !preserve){
|
|
this.order = this._filter_order;
|
|
delete this._filter_order;
|
|
}
|
|
},
|
|
_filter_core:function(filter, value, preserve){
|
|
var neworder = webix.toArray();
|
|
for (var i=0; i < this.order.length; i++){
|
|
var id = this.order[i];
|
|
if (filter(this.getItem(id),value))
|
|
neworder.push(id);
|
|
}
|
|
//set new order of items, store original
|
|
if (!preserve || !this._filter_order)
|
|
this._filter_order = this.order;
|
|
this.order = neworder;
|
|
},
|
|
find:function(config, first){
|
|
var result = [];
|
|
|
|
for(var i in this.pull){
|
|
var data = this.pull[i];
|
|
|
|
var match = true;
|
|
if (typeof config == "object"){
|
|
for (var key in config)
|
|
if (data[key] != config[key]){
|
|
match = false;
|
|
break;
|
|
}
|
|
} else if (!config(data))
|
|
match = false;
|
|
|
|
if (match)
|
|
result.push(data);
|
|
|
|
if (first && result.length)
|
|
return result[0];
|
|
}
|
|
|
|
return result;
|
|
},
|
|
filter:function(text,value,preserve){
|
|
//unfilter call but we already in not-filtered state
|
|
if (!text && !this._filter_order && !this._filter_branch) return;
|
|
if (!this.callEvent("onBeforeFilter", [text, value])) return;
|
|
|
|
this._filter_reset(preserve);
|
|
if (!this.order.length) return;
|
|
|
|
//if text not define -just unfilter previous state and exit
|
|
if (text){
|
|
var filter = text;
|
|
value = value||"";
|
|
if (typeof text == "string"){
|
|
text = text.replace(/#/g,"");
|
|
if (typeof value == "function")
|
|
filter = function(obj){
|
|
return value(obj[text]);
|
|
};
|
|
else{
|
|
value = value.toString().toLowerCase();
|
|
filter = function(obj,value){ //default filter - string start from, case in-sensitive
|
|
webix.assert(obj, "Client side filtering can't be used with dynamic loading");
|
|
return (obj[text]||"").toString().toLowerCase().indexOf(value)!=-1;
|
|
};
|
|
}
|
|
}
|
|
|
|
this._filter_core(filter, value, preserve, this._filterMode);
|
|
}
|
|
//repaint self
|
|
this.refresh();
|
|
|
|
this.callEvent("onAfterFilter", []);
|
|
},
|
|
/*
|
|
Iterate through collection
|
|
*/
|
|
_obj_array:function(){
|
|
var data = [];
|
|
for (var i = this.order.length - 1; i >= 0; i--)
|
|
data[i]=this.pull[this.order[i]];
|
|
|
|
return data;
|
|
},
|
|
each:function(method, master, all){
|
|
var order = this.order;
|
|
if (all)
|
|
order = this._filter_order || order;
|
|
|
|
for (var i=0; i<order.length; i++)
|
|
method.call((master||this), this.getItem(order[i]), i);
|
|
},
|
|
_methodPush:function(object,method){
|
|
return function(){ return object[method].apply(object,arguments); };
|
|
},
|
|
/*
|
|
map inner methods to some distant object
|
|
*/
|
|
provideApi:function(target,eventable){
|
|
this.debug_bind_master = target;
|
|
|
|
if (eventable){
|
|
this.mapEvent({
|
|
onbeforesort: target,
|
|
onaftersort: target,
|
|
onbeforeadd: target,
|
|
onafteradd: target,
|
|
onbeforedelete: target,
|
|
onafterdelete: target,
|
|
ondataupdate: target/*,
|
|
onafterfilter: target,
|
|
onbeforefilter: target*/
|
|
});
|
|
}
|
|
|
|
var list = ["sort","add","remove","exists","getIdByIndex","getIndexById","getItem","updateItem","refresh","count","filter","find","getNextId","getPrevId","clearAll","getFirstId","getLastId","serialize","sync"];
|
|
for (var i=0; i < list.length; i++)
|
|
target[list[i]] = this._methodPush(this,list[i]);
|
|
|
|
},
|
|
addMark:function(id, mark, css, value, silent){
|
|
var obj = this._marks[id]||{};
|
|
this._marks[id] = obj;
|
|
if (!obj[mark]){
|
|
obj[mark] = value||true;
|
|
if (css){
|
|
var old_css = obj.$css||"";
|
|
obj.$css = old_css+" "+mark;
|
|
}
|
|
if (!silent)
|
|
this.refresh(id);
|
|
}
|
|
return obj[mark];
|
|
},
|
|
removeMark:function(id, mark, css, silent){
|
|
var obj = this._marks[id];
|
|
if (obj){
|
|
if (obj[mark])
|
|
delete obj[mark];
|
|
if (css){
|
|
var current_css = obj.$css;
|
|
if (current_css){
|
|
obj.$css = current_css.replace(mark, "").replace(" "," ");
|
|
}
|
|
}
|
|
if (!silent)
|
|
this.refresh(id);
|
|
}
|
|
},
|
|
getMark:function(id, mark){
|
|
var obj = this._marks[id];
|
|
return (obj?obj[mark]:false);
|
|
},
|
|
clearMark:function(name, css, silent){
|
|
for (var id in this._marks){
|
|
var obj = this._marks[id];
|
|
if (obj[name]){
|
|
delete obj[name];
|
|
if (css && obj.$css)
|
|
obj.$css = obj.$css.replace(name, "").replace(" "," ");
|
|
if (!silent)
|
|
this.refresh(id);
|
|
}
|
|
}
|
|
},
|
|
/*
|
|
serializes data to a json object
|
|
*/
|
|
serialize: function(all){
|
|
var ids = this.order;
|
|
if (all && this._filter_order)
|
|
ids = this._filter_order;
|
|
|
|
var result = [];
|
|
for(var i=0; i< ids.length;i++) {
|
|
var el = this.pull[ids[i]];
|
|
if (this._scheme_serialize){
|
|
el = this._scheme_serialize(el);
|
|
if (el===false) continue;
|
|
}
|
|
result.push(el);
|
|
}
|
|
return result;
|
|
},
|
|
sorting:{
|
|
create:function(config){
|
|
return this._dir(config.dir, this._by(config.by, config.as));
|
|
},
|
|
as:{
|
|
//handled by dataFeed
|
|
"server":function(){
|
|
return false;
|
|
},
|
|
"date":function(a,b){
|
|
a=a-0; b=b-0;
|
|
return a>b?1:(a<b?-1:0);
|
|
},
|
|
"int":function(a,b){
|
|
a = a*1; b=b*1;
|
|
return a>b?1:(a<b?-1:0);
|
|
},
|
|
"string_strict":function(a,b){
|
|
a = a.toString(); b=b.toString();
|
|
return a>b?1:(a<b?-1:0);
|
|
},
|
|
"string":function(a,b){
|
|
if (!b) return 1;
|
|
if (!a) return -1;
|
|
|
|
a = a.toString().toLowerCase(); b=b.toString().toLowerCase();
|
|
return a>b?1:(a<b?-1:0);
|
|
}
|
|
},
|
|
_by:function(prop, method){
|
|
if (!prop)
|
|
return method;
|
|
if (typeof method != "function")
|
|
method = this.as[method||"string"];
|
|
|
|
webix.assert(method, "Invalid sorting method");
|
|
return function(a,b){
|
|
return method(a[prop],b[prop]);
|
|
};
|
|
},
|
|
_dir:function(prop, method){
|
|
if (prop == "asc" || !prop)
|
|
return method;
|
|
return function(a,b){
|
|
return method(a,b)*-1;
|
|
};
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
webix.DataCollection = webix.proto({
|
|
name:"DataCollection",
|
|
isVisible:function(){
|
|
if (!this.data.order.length && !this.data._filter_order && !this._settings.dataFeed) return false;
|
|
return true;
|
|
},
|
|
$init:function(config){
|
|
this.data.provideApi(this, true);
|
|
var id = (config&&config.id)?config.id:webix.uid();
|
|
this._settings.id =id;
|
|
webix.ui.views[id] = this;
|
|
this.data.attachEvent("onStoreLoad", webix.bind(function(){
|
|
this.callEvent("onBindRequest",[]);
|
|
}, this));
|
|
},
|
|
refresh:function(){ this.callEvent("onBindRequest",[]); }
|
|
}, webix.DataMove, webix.CollectionBind, webix.BindSource, webix.ValidateCollection, webix.DataLoader, webix.MapCollection, webix.EventSystem, webix.BaseBind, webix.Destruction, webix.Settings);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
webix.Scrollable = {
|
|
$init:function(config){
|
|
//do not spam unwanted scroll containers for templates
|
|
if (config && !config.scroll && this._one_time_scroll)
|
|
return (this._dataobj = (this._dataobj||this._contentobj));
|
|
|
|
(this._dataobj||this._contentobj).appendChild(webix.html.create("DIV",{ "class" : "webix_scroll_cont" },""));
|
|
this._dataobj=(this._dataobj||this._contentobj).firstChild;
|
|
|
|
if(!webix.env.touch)
|
|
webix.event(this._viewobj,"scroll", webix.bind(function(e){
|
|
if(this.callEvent)
|
|
webix.delay(function(){
|
|
this.callEvent("onAfterScroll", []);
|
|
}, this);
|
|
},this));
|
|
},
|
|
/*defaults:{
|
|
scroll:true
|
|
},*/
|
|
scroll_setter:function(value){
|
|
if (!value) return false;
|
|
var marker = (value=="x"?"x":(value=="xy"?"xy":(value=="a"?"xy":"y")));
|
|
if (webix.Touch && webix.Touch.$active){
|
|
this._dataobj.setAttribute("touch_scroll",marker);
|
|
if (this.attachEvent)
|
|
this.attachEvent("onAfterRender", webix.bind(this._refresh_scroll,this));
|
|
this._touch_scroll = true;
|
|
} else {
|
|
if (webix.env.$customScroll){
|
|
webix.CustomScroll.enable(this, marker);
|
|
} else {
|
|
var node = this._dataobj.parentNode.style;
|
|
if (value.toString().indexOf("a")!=-1){
|
|
node.overflowX = node.overflowY = "auto";
|
|
} else {
|
|
if (marker.indexOf("x")!=-1){
|
|
this._scroll_x = true;
|
|
node.overflowX = "scroll";
|
|
}
|
|
if (marker.indexOf("y")!=-1){
|
|
this._scroll_y = true;
|
|
node.overflowY = "scroll";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return marker;
|
|
},
|
|
_onoff_scroll:function(mode){
|
|
if (!!this._settings.scroll == !!mode) return;
|
|
|
|
if (!webix.env.$customScroll){
|
|
var style = this._dataobj.parentNode.style;
|
|
style.overflowX = style.overflowY = mode?"auto":"hidden";
|
|
}
|
|
|
|
this._scroll_x = this._scroll_y = !!mode;
|
|
this._settings.scroll = !!mode;
|
|
},
|
|
getScrollState:function(){
|
|
if (webix.Touch && webix.Touch.$active){
|
|
var temp = webix.Touch._get_matrix(this._dataobj);
|
|
return { x : -temp.e, y : -temp.f };
|
|
} else
|
|
return { x : this._dataobj.parentNode.scrollLeft, y : this._dataobj.parentNode.scrollTop };
|
|
},
|
|
scrollTo:function(x,y){
|
|
if (webix.Touch && webix.Touch.$active){
|
|
y = Math.max(0, Math.min(y, this._dataobj.offsetHeight - this._content_height));
|
|
x = Math.max(0, Math.min(x, this._dataobj.offsetWidth - this._content_width));
|
|
webix.Touch._set_matrix(this._dataobj, -x, -y, this._settings.scrollSpeed||"100ms");
|
|
} else {
|
|
this._dataobj.parentNode.scrollLeft=x;
|
|
this._dataobj.parentNode.scrollTop=y;
|
|
}
|
|
},
|
|
_refresh_scroll:function(){
|
|
if (this._settings.scroll.toString().indexOf("x")!=-1){
|
|
var x = this._dataobj.scrollWidth;
|
|
if (x){ //in hidden state we will have a Zero scrollWidth
|
|
this._dataobj.style.width = "100%";
|
|
this._dataobj.style.width = x + "px";
|
|
}
|
|
}
|
|
|
|
if(webix.Touch && webix.Touch.$active && this._touch_scroll){
|
|
webix.Touch._clear_artefacts();
|
|
webix.Touch._scroll_end();
|
|
var s = this.getScrollState();
|
|
var dx = this._dataobj.offsetWidth - this.$width - s.x;
|
|
var dy = this._dataobj.offsetHeight - this.$height - s.y;
|
|
|
|
//if current scroll is outside of data area
|
|
if(dx<0 || dy < 0){
|
|
//scroll to the end of data area
|
|
var x = (dx<0?Math.min(-dx - s.x,0):- s.x);
|
|
var y = (dy<0?Math.min(-dy - s.y,0):- s.y);
|
|
webix.Touch._set_matrix(this._dataobj, x, y, 0);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
/*
|
|
UI:paging control
|
|
*/
|
|
|
|
|
|
|
|
webix.protoUI({
|
|
defaults:{
|
|
size:10, //items on page
|
|
page: 0, //current page
|
|
group:5,
|
|
template:"{common.pages()}",
|
|
maxWidth:100000,
|
|
height:30,
|
|
borderless:true
|
|
},
|
|
name:"pager",
|
|
on_click:{
|
|
//on paging button click
|
|
"webix_pager_item":function(e,id){
|
|
this.select(id);
|
|
}
|
|
},
|
|
$init:function(config){
|
|
this.data = this._settings;
|
|
this._dataobj = this._viewobj;
|
|
this._viewobj.className += " webix_pager";
|
|
|
|
if(config.master===false||config.master === 0)
|
|
this.$ready.push(this._remove_master);
|
|
},
|
|
_remove_master:function(){
|
|
this.refresh();
|
|
this.$master = { refresh:function(){}, select:function(){} };
|
|
},
|
|
select:function(id){
|
|
if (this.$master && this.$master.name == "pager")
|
|
return this.$master.select(id);
|
|
|
|
//id - id of button, number for page buttons
|
|
switch(id){
|
|
case "next":
|
|
id = this._settings.page+1;
|
|
break;
|
|
case "prev":
|
|
id = this._settings.page-1;
|
|
break;
|
|
case "first":
|
|
id = 0;
|
|
break;
|
|
case "last":
|
|
id = this._settings.limit-1;
|
|
break;
|
|
default:
|
|
//use incoming id
|
|
break;
|
|
}
|
|
if (id<0) id=0;
|
|
if (id>=this.data.limit) id=this.data.limit-1;
|
|
|
|
var old = this.data.page;
|
|
this.data.page = id*1; //must be int
|
|
|
|
if (this.refresh()){
|
|
if (!this._settings.animate || !this._animate(old, id*1, this._settings.animate))
|
|
this.$master.refresh();
|
|
}
|
|
},
|
|
_id:"webix_p_id",
|
|
template_setter:webix.template,
|
|
type:{
|
|
template:function(a,b){ return a.template.call(this, a,b); },
|
|
//list of page numbers
|
|
pages:function(obj){
|
|
var html="";
|
|
//skip rendering if paging is not fully initialized
|
|
if (obj.page == -1) return "";
|
|
//current page taken as center of view, calculate bounds of group
|
|
obj.$min = obj.page-Math.round((obj.group-1)/2);
|
|
obj.$max = obj.$min + obj.group*1 - 1;
|
|
if (obj.$min<0){
|
|
obj.$max+=obj.$min*(-1);
|
|
obj.$min=0;
|
|
}
|
|
if (obj.$max>=obj.limit){
|
|
obj.$min -= Math.min(obj.$min,obj.$max-obj.limit+1);
|
|
obj.$max = obj.limit-1;
|
|
}
|
|
//generate HTML code of buttons
|
|
for (var i=(obj.$min||0); i<=obj.$max; i++)
|
|
html+=this.button({id:i, index:(i+1), selected:(i == obj.page ?"_selected":"")});
|
|
return html;
|
|
},
|
|
page:function(obj){
|
|
return obj.page+1;
|
|
},
|
|
//go-to-first page button
|
|
first:function(){
|
|
return this.button({ id:"first", index:webix.locale.pager.first, selected:""});
|
|
},
|
|
//go-to-last page button
|
|
last:function(){
|
|
return this.button({ id:"last", index:webix.locale.pager.last, selected:""});
|
|
},
|
|
//go-to-prev page button
|
|
prev:function(){
|
|
return this.button({ id:"prev", index:webix.locale.pager.prev, selected:""});
|
|
},
|
|
//go-to-next page button
|
|
next:function(){
|
|
return this.button({ id:"next", index:webix.locale.pager.next, selected:""});
|
|
},
|
|
button:webix.template("<button type='button' webix_p_id='{obj.id}' class='webix_pager_item{obj.selected}'>{obj.index}</button>")
|
|
},
|
|
clone:function(pager){
|
|
if (!pager.$view){
|
|
pager.view = "pager";
|
|
pager = webix.ui(pager);
|
|
}
|
|
|
|
this._clone = pager;
|
|
pager.$master = this;
|
|
this._refresh_clone();
|
|
},
|
|
refresh:function(){
|
|
var s = this._settings;
|
|
if (!s.count) return;
|
|
|
|
//max page number
|
|
s.limit = Math.ceil(s.count/s.size);
|
|
|
|
var newPage = Math.min(s.limit-1, s.page);
|
|
|
|
if (newPage != s.page)
|
|
return this.$master.setPage(newPage);
|
|
|
|
s.page = newPage;
|
|
if (newPage>=0 && (newPage!=s.old_page) || (s.limit != s.old_limit) || (s.old_count != s.count)){
|
|
//refresh self only if current page or total limit was changed
|
|
this.render();
|
|
this._refresh_clone();
|
|
s.old_limit = s.limit; //save for onchange check in next iteration
|
|
s.old_page = s.page;
|
|
s.old_count = s.count;
|
|
return true;
|
|
}
|
|
},
|
|
apiOnly_setter:function(value){
|
|
return (this.$apiOnly=value);
|
|
},
|
|
_refresh_clone:function(){
|
|
if (this._clone){
|
|
this._clone._settings.count = this._settings.count;
|
|
this._clone._settings.page = this._settings.page;
|
|
this._clone.refresh();
|
|
}
|
|
},
|
|
_animate:function(old, id, config){
|
|
if (old == id) return false;
|
|
if (this._pgInAnimation){
|
|
if(this._pgAnimateTimeout){
|
|
window.clearTimeout(this._pgAnimateTimeout);
|
|
}
|
|
return (this._pgAnimateTimeout = webix.delay(this._animate, this,[old, id, config],100));
|
|
}
|
|
var direction = id > old ? "left" : "right";
|
|
if (config.direction == "top" || config.direction == "bottom")
|
|
direction = id > old ? "top" : "bottom";
|
|
if (config.flip)
|
|
direction = "";
|
|
|
|
|
|
|
|
//make copy of existing view
|
|
var top = 0;
|
|
var snode = this.$master._dataobj;
|
|
if (this.$master._body){ //datatable
|
|
snode = this.$master._body;
|
|
top = snode.offsetTop;
|
|
webix.html.addCss(this.$master.$view, "webix_animation");
|
|
}
|
|
|
|
var onode = snode.cloneNode(true);
|
|
onode.style.width = snode.style.width = "100%";
|
|
onode.style.backgroundColor = snode.style.backgroundColor = "white";
|
|
|
|
//redraw page
|
|
this.$master.refresh();
|
|
//append copy next to original
|
|
webix.html.insertBefore(onode, snode.nextSibling, snode.parentNode);
|
|
|
|
//animation config
|
|
var line;
|
|
var base = config !== true ? config : {};
|
|
var aniset = webix.extend({
|
|
direction:direction,
|
|
callback:webix.bind(function(){
|
|
aniset.callback = null;
|
|
webix.animate.breakLine(line);
|
|
this._pgInAnimation = false;
|
|
if (this.$master._body)
|
|
webix.html.removeCss(this.$master.$view, "webix_animation");
|
|
},this),
|
|
top:top
|
|
}, base);
|
|
|
|
//run animation
|
|
line = webix.animate.formLine(snode, onode, aniset);
|
|
webix.animate([ snode, onode ], aniset );
|
|
this._pgInAnimation = true;
|
|
}
|
|
}, webix.MouseEvents, webix.SingleRender, webix.ui.view, webix.EventSystem);
|
|
|
|
webix.locale.pager = {
|
|
first: " << ",
|
|
last: " >> ",
|
|
next: " > ",
|
|
prev: " < "
|
|
};
|
|
|
|
|
|
webix.PagingAbility = {
|
|
pager_setter:function(pager){
|
|
if (typeof pager == "string"){
|
|
var ui_pager = webix.$$(pager);
|
|
if (!ui_pager){
|
|
this.$blockRender = true;
|
|
webix.delay(function(){
|
|
var obj = webix.$$(pager);
|
|
|
|
this._settings.pager = this.pager_setter(obj);
|
|
var s = obj._settings;
|
|
s.count = this.data._count_pager_total(s.level);
|
|
obj.refresh();
|
|
|
|
this.$blockRender = false;
|
|
this.render();
|
|
}, this);
|
|
return null;
|
|
}
|
|
pager = ui_pager;
|
|
}
|
|
|
|
function check_pager_sizes(repeat){
|
|
if (pager.config.autosize && this.getVisibleCount){
|
|
var count = this.getVisibleCount();
|
|
if (isNaN(count)){
|
|
pager.config.size = 1;
|
|
webix.delay(check_pager_sizes, this, [true]);
|
|
} else if (count != pager.config.size){
|
|
pager.config.size = count;
|
|
pager.refresh();
|
|
if (repeat === true)
|
|
this.refresh();
|
|
}
|
|
}
|
|
|
|
var s = this._settings.pager;
|
|
//initial value of pager = -1, waiting for real value
|
|
if (s.page == -1) return false;
|
|
|
|
this.data.$min = this._count_pager_index(0, s.page*s.size); //affect data.getRange
|
|
this.data.$max = this._count_pager_index(this.data.$min, s.size);
|
|
this.data.$pagesize = this.data.$max - this.data.$min;
|
|
|
|
return true;
|
|
}
|
|
|
|
this.attachEvent("onBeforeRender",check_pager_sizes);
|
|
|
|
if (!pager.$view){
|
|
pager.view = "pager";
|
|
pager = webix.ui(pager);
|
|
}
|
|
this._pager = pager;
|
|
pager.$master = this;
|
|
|
|
this.data.attachEvent("onStoreUpdated", function(){
|
|
var s = pager._settings;
|
|
s.count = this._count_pager_total(s.level);
|
|
pager.refresh();
|
|
});
|
|
this.data._count_pager_total = this._count_pager_total;
|
|
|
|
return pager._settings;
|
|
},
|
|
_count_pager_total:function(level){
|
|
if (level && level !== 0){
|
|
var count = 0;
|
|
this.each(function(obj){
|
|
if (obj.$level == level) count++;
|
|
});
|
|
return count;
|
|
} else
|
|
return this.count();
|
|
},
|
|
_count_pager_index:function(start, count){
|
|
var s = this._settings.pager;
|
|
|
|
if (s.level && s.level !== 0){
|
|
var end = start;
|
|
var max = this.data.order.length;
|
|
|
|
if (count)
|
|
while (end < max){
|
|
if (this.data.getItem(this.data.order[end]).$level == s.level){
|
|
if (count === 0)
|
|
break;
|
|
else
|
|
count--;
|
|
}
|
|
end++;
|
|
}
|
|
|
|
return end;
|
|
} else
|
|
return start+count;
|
|
},
|
|
setPage:function(value){
|
|
if (this._pager)
|
|
this._pager.select(value);
|
|
},
|
|
getPage:function(){
|
|
return this._pager._settings.page;
|
|
},
|
|
getPager:function(){
|
|
return this._pager;
|
|
}
|
|
};
|
|
/*
|
|
Behavior: AutoTooltip - links tooltip to data driven item
|
|
*/
|
|
|
|
/*
|
|
UI: Tooltip
|
|
|
|
@export
|
|
show
|
|
hide
|
|
*/
|
|
|
|
|
|
|
|
|
|
webix.protoUI({
|
|
name:"tooltip",
|
|
defaults:{
|
|
dy:0,
|
|
dx:20
|
|
},
|
|
$init:function(container){
|
|
if (typeof container == "string"){
|
|
container = { template:container };
|
|
}
|
|
|
|
this.type = webix.extend({}, this.type);
|
|
|
|
//create container for future tooltip
|
|
this._viewobj = this._contentobj = this._dataobj = document.createElement("DIV");
|
|
this._contentobj.className = "webix_tooltip";
|
|
webix.html.insertBefore(this._contentobj,document.body.firstChild,document.body);
|
|
webix.attachEvent("onClick", webix.bind(function(e){
|
|
if (this._visible && webix.$$(e) != this)
|
|
this.hide();
|
|
}, this));
|
|
},
|
|
adjust:function(){ },
|
|
//show tooptip
|
|
//pos - object, pos.x - left, pox.y - top
|
|
isVisible:function(){
|
|
return true;
|
|
},
|
|
show:function(data,pos){
|
|
if (this._disabled) return;
|
|
//render sefl only if new data was provided
|
|
if (this.data!=data){
|
|
this.data=webix.extend({},data);
|
|
this.render(data);
|
|
}
|
|
|
|
if (this._dataobj.firstChild){
|
|
//show at specified position
|
|
this._contentobj.style.top = pos.y+this._settings.dy+"px";
|
|
this._contentobj.style.left = pos.x+this._settings.dx+"px";
|
|
this._contentobj.style.display="block";
|
|
}
|
|
this._visible = true;
|
|
},
|
|
//hide tooltip
|
|
hide:function(){
|
|
this.data=null; //nulify, to be sure that on next show it will be fresh-rendered
|
|
this._contentobj.style.display="none";
|
|
this._visible = false;
|
|
},
|
|
disable:function(){
|
|
this._disabled = true;
|
|
},
|
|
enable:function(){
|
|
this._disabled = false;
|
|
},
|
|
type:{
|
|
template:webix.template("{obj.id}"),
|
|
templateStart:webix.template.empty,
|
|
templateEnd:webix.template.empty
|
|
}
|
|
|
|
}, webix.SingleRender, webix.Settings, webix.EventSystem, webix.ui.view);
|
|
|
|
|
|
|
|
webix.AutoTooltip = {
|
|
tooltip_setter:function(value){
|
|
if (value){
|
|
if (typeof value == "function")
|
|
value = { template:value };
|
|
|
|
var col_mode = !value.template;
|
|
var t = new webix.ui.tooltip(value);
|
|
this._enable_mouse_move();
|
|
var showEvent = this.attachEvent("onMouseMove",function(id,e){ //show tooltip on mousemove
|
|
this._mouseEventX = e.clientX;
|
|
this._mouseEventY = e.clientY;
|
|
if (this.getColumnConfig){
|
|
var config = t.type.column = this.getColumnConfig(id.column);
|
|
if (col_mode){
|
|
//empty tooltip - ignoring
|
|
if (!config.tooltip && config.tooltip != webix.undefined)
|
|
return;
|
|
var trg = e.target || e.srcElements;
|
|
|
|
if(trg.getAttribute("webix_area") && config.tooltip){
|
|
var area = trg.getAttribute("webix_area");
|
|
t.type.template = function(obj,common){
|
|
var values = obj[common.column.id];
|
|
return webix.template(config.tooltip).call(this,obj,common,values[area],area);
|
|
};
|
|
}
|
|
else{
|
|
if (config.tooltip)
|
|
t.type.template = config.tooltip = webix.template(config.tooltip);
|
|
else {
|
|
var text = this.getText(id.row, id.column);
|
|
t.type.template = function(){ return text; };
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!webix.DragControl.active)
|
|
t.show(this.getItem(id),webix.html.pos(e));
|
|
});
|
|
// [[IMPROVE]] As we can can have only one instance of tooltip per page
|
|
// this handler can be attached once per page, not once per component
|
|
var hideEvent = webix.event(document.body, "mousemove", webix.bind(function(e){
|
|
e = e||event;
|
|
if(this._mouseEventX != e.clientX || this._mouseEventY != e.clientY)
|
|
t.hide();
|
|
},this));
|
|
this.attachEvent("onDestruct",function(){
|
|
if(this.config.tooltip)
|
|
this.config.tooltip.destructor();
|
|
});
|
|
this.attachEvent("onAfterScroll", function(){
|
|
t.hide();
|
|
});
|
|
t.attachEvent("onDestruct",webix.bind(function(){
|
|
this.detachEvent(showEvent);
|
|
webix.eventRemove(hideEvent);
|
|
},this));
|
|
return t;
|
|
}
|
|
}
|
|
};
|
|
|
|
webix.protoUI({
|
|
name:"proto",
|
|
$init:function(){
|
|
this.data.provideApi(this, true);
|
|
this._dataobj = this._dataobj || this._contentobj;
|
|
|
|
//render self , each time when data is updated
|
|
this.data.attachEvent("onStoreUpdated",webix.bind(function(){
|
|
this.render.apply(this,arguments);
|
|
},this));
|
|
},
|
|
$setSize:function(){
|
|
if (webix.ui.view.prototype.$setSize.apply(this, arguments))
|
|
this.render();
|
|
},
|
|
_id:"webix_item",
|
|
on_mouse_move:{
|
|
},
|
|
type:{}
|
|
}, webix.PagingAbility, webix.DataMarks, webix.AutoTooltip,webix.ValidateCollection,webix.RenderStack, webix.DataLoader, webix.ui.view, webix.EventSystem, webix.Settings);
|
|
|
|
webix.CodeParser = {
|
|
//converts a complex object into an object with primitives properties
|
|
collapseNames:function(base, prefix, data){
|
|
data = data || {};
|
|
prefix = prefix || "";
|
|
|
|
if(!base || typeof base != "object")
|
|
return null;
|
|
|
|
for(var prop in base){
|
|
if(base[prop] && typeof base[prop] == "object" && !webix.isDate(base[prop]) && !webix.isArray(base[prop])){
|
|
webix.CodeParser.collapseNames(base[prop], prefix+prop+".", data);
|
|
} else {
|
|
data[prefix+prop] = base[prop];
|
|
}
|
|
}
|
|
return data;
|
|
},
|
|
//converts an object with primitive properties into an object with complex properties
|
|
expandNames:function(base){
|
|
var data = {},
|
|
i, lastIndex, name, obj, prop;
|
|
|
|
for(prop in base){
|
|
name = prop.split(".");
|
|
lastIndex = name.length-1;
|
|
obj = data;
|
|
for( i =0; i < lastIndex; i++ ){
|
|
if(!obj[name[i]])
|
|
obj[name[i]] = {};
|
|
obj = obj[name[i]];
|
|
}
|
|
obj[name[lastIndex]] = base[prop];
|
|
}
|
|
|
|
return data;
|
|
}
|
|
};
|
|
|
|
webix.Values = {
|
|
$init:function(){
|
|
this.elements = {};
|
|
},
|
|
focus:function(name){
|
|
if (name){
|
|
webix.assert(this.elements[name],"unknown input name: "+name);
|
|
this._focus(this.elements[name]);
|
|
} else{
|
|
for(var n in this.elements){
|
|
if(this._focus(this.elements[n]))
|
|
return true;
|
|
}
|
|
}
|
|
},
|
|
_focus: function(target){
|
|
if (target && target.focus){
|
|
target.focus();
|
|
return true;
|
|
}
|
|
},
|
|
setValues:function(data, update){
|
|
if (this._settings.complexData)
|
|
data = webix.CodeParser.collapseNames(data);
|
|
|
|
this._inner_setValues(data, update);
|
|
},
|
|
_inner_setValues:function(data, update){
|
|
this._is_form_dirty = update;
|
|
//prevent onChange calls from separate controls
|
|
this.blockEvent();
|
|
|
|
if (!update || !this._values)
|
|
this._values = {};
|
|
|
|
if (webix.debug_render)
|
|
webix.log("Render: "+this.name+"@"+this._settings.id);
|
|
|
|
for (var name in data)
|
|
if (!this.elements[name])
|
|
this._values[name] = data[name];
|
|
|
|
for (var name in this.elements){
|
|
var input = this.elements[name];
|
|
if (input){
|
|
if (!webix.isUndefined(data[name]))
|
|
input.setValue(data[name]);
|
|
else if (!update && input._allowsClear)
|
|
input.setValue("");
|
|
this._values[name] = input.getValue();
|
|
}
|
|
}
|
|
|
|
this.unblockEvent();
|
|
this.callEvent("onValues",[]);
|
|
},
|
|
isDirty:function(){
|
|
if (this._is_form_dirty) return true;
|
|
if (this.getDirtyValues(1) === 1)
|
|
return true;
|
|
|
|
return false;
|
|
},
|
|
setDirty:function(flag){
|
|
this._is_form_dirty = flag;
|
|
if (!flag)
|
|
this._values = this._inner_getValues();
|
|
},
|
|
getDirtyValues:function(){
|
|
var result = {};
|
|
if (this._values){
|
|
for (var name in this.elements){
|
|
var value = this.elements[name].getValue();
|
|
if (this._values[name] != value){
|
|
result[name] = value;
|
|
//FIXME - used by isDirty
|
|
if (arguments[0])
|
|
return 1;
|
|
}
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
getCleanValues:function(){
|
|
return this._values;
|
|
},
|
|
getValues:function(filter){
|
|
var data = this._inner_getValues(filter);
|
|
if (this._settings.complexData)
|
|
data = webix.CodeParser.expandNames(data);
|
|
|
|
return data;
|
|
},
|
|
_inner_getValues:function(filter){
|
|
//get original data
|
|
var success,
|
|
elem = null,
|
|
data = (this._values?webix.copy(this._values):{});
|
|
|
|
//update properties from linked controls
|
|
for (var name in this.elements){
|
|
elem = this.elements[name];
|
|
success = true;
|
|
if(filter){
|
|
if(typeof filter == "object"){
|
|
if(filter.hidden === false)
|
|
success = elem.isVisible();
|
|
if(success && filter.disabled === false)
|
|
success = elem.isEnabled();
|
|
}
|
|
else
|
|
success = filter.call(this,elem);
|
|
}
|
|
if(success)
|
|
data[name] = elem.getValue();
|
|
else
|
|
delete data[name]; //in case of this._values[name]
|
|
}
|
|
return data;
|
|
},
|
|
clear:function(){
|
|
this._is_form_dirty = false;
|
|
var data = {};
|
|
for (var name in this.elements)
|
|
if (this.elements[name]._allowsClear)
|
|
data[name] = this.elements[name]._settings.defaultValue||"";
|
|
|
|
this._inner_setValues(data);
|
|
},
|
|
markInvalid: function(name, state){
|
|
// remove 'invalid' mark
|
|
if(state === false){
|
|
this._clear_invalid(name);
|
|
}
|
|
// add 'invalid' mark
|
|
else{
|
|
// set invalidMessage
|
|
if(typeof state == "string"){
|
|
var input = this.elements[name];
|
|
if(input)
|
|
input._settings.invalidMessage = state;
|
|
}
|
|
this._mark_invalid(name);
|
|
}
|
|
},
|
|
_mark_invalid:function(id){
|
|
var input = this.elements[id];
|
|
if (id && input){
|
|
this._clear_invalid(id,true);
|
|
webix.html.addCss(input._viewobj, "webix_invalid");
|
|
input._settings.invalid = true;
|
|
var message = input._settings.invalidMessage;
|
|
if(typeof message === "string" && input.setBottomText)
|
|
input.setBottomText();
|
|
}
|
|
},
|
|
_clear_invalid:function(id,silent){
|
|
var input = this.elements[id];
|
|
if(id && input && input.$view && input._settings.invalid){
|
|
webix.html.removeCss(input._viewobj, "webix_invalid");
|
|
input._settings.invalid = false;
|
|
var message = input._settings.invalidMessage;
|
|
if(typeof message === "string" && !silent && input.setBottomText)
|
|
input.setBottomText();
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
webix.protoUI({
|
|
name:"toolbar",
|
|
defaults:{
|
|
type:'toolbar'
|
|
},
|
|
_render_borders:true,
|
|
_form_classname:"webix_toolbar",
|
|
_form_vertical:false,
|
|
$init:function(config){
|
|
if (!config.borderless)
|
|
this._contentobj.style.borderWidth="1px";
|
|
|
|
this._contentobj.className+=" "+this._form_classname;
|
|
},
|
|
_recollect_elements:function(){
|
|
var form = this;
|
|
form.elements = {};
|
|
webix.ui.each(this, function(view){
|
|
if (view._settings.name && view.getValue && view.setValue){
|
|
form.elements[view._settings.name] = view;
|
|
if (view.mapEvent)
|
|
view.mapEvent({
|
|
onbeforetabclick:form,
|
|
onaftertabclick:form,
|
|
onitemclick:form,
|
|
onchange:form
|
|
});
|
|
}
|
|
|
|
if (view.setValues) return false;
|
|
});
|
|
this.setDirty(false);
|
|
},
|
|
_parse_cells_ext_end:function(){
|
|
this._recollect_elements();
|
|
},
|
|
_parse_cells_ext:function(collection){
|
|
var config = this._settings;
|
|
if (config.elements && !collection){
|
|
this._collection = collection = config.elements;
|
|
this._vertical_orientation = this._form_vertical;
|
|
delete config.elements;
|
|
}
|
|
|
|
if (this._settings.elementsConfig)
|
|
this._rec_apply_settings(this._collection, config.elementsConfig);
|
|
|
|
return collection;
|
|
},
|
|
_rec_apply_settings:function(col, settings){
|
|
for (var i=0; i<col.length; i++){
|
|
var element = col[i];
|
|
webix.extend( element, settings );
|
|
var nextsettings = settings;
|
|
|
|
if (element.elementsConfig)
|
|
nextsettings = webix.extend(webix.extend({}, element.elementsConfig), settings);
|
|
|
|
var sub;
|
|
if (element.body)
|
|
sub = [element.body];
|
|
else
|
|
sub = element.rows || element.cols || element.cells || element.body;
|
|
|
|
if (sub)
|
|
this._rec_apply_settings(sub, nextsettings);
|
|
}
|
|
},
|
|
$getSize:function(dx, dy){
|
|
var sizes = webix.ui.layout.prototype.$getSize.call(this, dx, dy);
|
|
var parent = this.getParentView();
|
|
var index = this._vertical_orientation?3:1;
|
|
if (parent && this._vertical_orientation != parent._vertical_orientation)
|
|
sizes[index]+=100000;
|
|
|
|
webix.debug_size_box(this, sizes, true);
|
|
return sizes;
|
|
},
|
|
render:function(){
|
|
},
|
|
refresh:function(){
|
|
this.render();
|
|
}
|
|
}, webix.Scrollable, webix.AtomDataLoader, webix.Values, webix.ui.layout, webix.ValidateData);
|
|
|
|
|
|
webix.protoUI({
|
|
name:"template",
|
|
$init:function(config){
|
|
var subtype = this._template_types[config.type];
|
|
if (subtype){
|
|
webix.extend(config, subtype);
|
|
|
|
//will reset borders for "section"
|
|
if (config.borderless){
|
|
delete config._inner;
|
|
this._set_inner(config);
|
|
}
|
|
}
|
|
|
|
if (this._dataobj == this._viewobj){
|
|
this._dataobj = webix.html.create("DIV");
|
|
this._dataobj.className = " webix_template";
|
|
this._viewobj.appendChild(this._dataobj);
|
|
} else
|
|
this._dataobj.className += " webix_template";
|
|
|
|
this.attachEvent("onAfterRender", this._correct_width_scroll);
|
|
},
|
|
setValues:function(obj, update){
|
|
this.data = update?webix.extend(this.data, obj, true):obj;
|
|
this.render();
|
|
},
|
|
getValues:function(){
|
|
return this.data;
|
|
},
|
|
$skin:function(){
|
|
this._template_types.header.height = this._template_types.section.height = webix.skin.$active.barHeight;
|
|
},
|
|
_template_types:{
|
|
"header":{
|
|
css:"webix_header"
|
|
},
|
|
"section":{
|
|
css:"webix_section",
|
|
borderless:true
|
|
},
|
|
"clean":{
|
|
css:"webix_clean",
|
|
borderless:true
|
|
}
|
|
},
|
|
onClick_setter:function(value){
|
|
this.on_click = webix.extend((this.on_click || {}), value, true);
|
|
|
|
if (!this._onClick)
|
|
webix.extend(this, webix.MouseEvents);
|
|
|
|
return value;
|
|
},
|
|
defaults:{
|
|
template:webix.template.empty
|
|
},
|
|
_render_me:function(){
|
|
this._not_render_me = false;
|
|
this._probably_render_me();
|
|
this.resize();
|
|
},
|
|
_probably_render_me:function(){
|
|
if (!this._not_render_me){
|
|
this._not_render_me = true;
|
|
this.render();
|
|
}
|
|
},
|
|
src_setter:function(value){
|
|
this._not_render_me = true;
|
|
|
|
this.callEvent("onBeforeLoad",[]);
|
|
webix.ajax(value, webix.bind(function(text){
|
|
this._settings.template = webix.template(text);
|
|
this._render_me();
|
|
this.callEvent("onAfterLoad",[]);
|
|
}, this));
|
|
return value;
|
|
},
|
|
_correct_width_scroll:function(){
|
|
//we need to force auto height calculation after content change
|
|
//dropping the last_size flag will ensure that inner logic of $setSize will be processed
|
|
if (this._settings.autoheight){
|
|
this._last_size = null;
|
|
this.resize();
|
|
}
|
|
|
|
if (this._settings.scroll && this._settings.scroll.indexOf("x") != -1)
|
|
this._dataobj.style.width = this._dataobj.scrollWidth + "px";
|
|
},
|
|
content_setter:function(config){
|
|
if (config){
|
|
this._not_render_me = true;
|
|
this.render = function(){};
|
|
this._dataobj.appendChild(webix.toNode(config));
|
|
}
|
|
},
|
|
refresh:function(){
|
|
this.render();
|
|
},
|
|
setHTML:function(html){
|
|
this._settings.template = function(){ return html; };
|
|
this.refresh();
|
|
},
|
|
setContent:function(content){
|
|
this._dataobj.innerHTML = "";
|
|
this.content_setter(content);
|
|
},
|
|
$setSize:function(x,y){
|
|
if (webix.ui.view.prototype.$setSize.call(this,x,y)){
|
|
this._probably_render_me();
|
|
if (this._settings.autoheight){
|
|
var top =this.getTopParentView();
|
|
clearTimeout(top._template_resize_timer);
|
|
top._template_resize_timer = webix.delay(this.resize, this);
|
|
}
|
|
return true;
|
|
}
|
|
},
|
|
$getSize:function(x,y){
|
|
if (this._settings.autoheight && !this._settings.type)
|
|
this._settings.height = this._get_auto_height();
|
|
|
|
return webix.ui.view.prototype.$getSize.call(this,x,y);
|
|
},
|
|
_get_auto_height:function(){
|
|
var size;
|
|
|
|
this._probably_render_me();
|
|
var padding = webix.skin.$active.layoutPadding.space;
|
|
this._dataobj.style.height = "auto";
|
|
size = this._dataobj.scrollHeight;
|
|
this._dataobj.style.height = "";
|
|
|
|
return size;
|
|
},
|
|
_one_time_scroll:true //scroll will appear only if set directly in config
|
|
}, webix.Scrollable, webix.AtomDataLoader, webix.AtomRender, webix.EventSystem, webix.ui.view);
|
|
|
|
webix.protoUI({
|
|
name:"iframe",
|
|
$init:function(config){
|
|
this._dataobj = this._contentobj;
|
|
this._contentobj.innerHTML = "<iframe style='width:100%; height:100%' frameborder='0' onload='var t= $$(\""+config.id+"\"); if (t) t.callEvent(\"onAfterLoad\",[]);' src='about:blank'></iframe>";
|
|
},
|
|
load:function(value){
|
|
this.src_setter(value);
|
|
},
|
|
src_setter:function(value){
|
|
this.getIframe().src = value;
|
|
this.callEvent("onBeforeLoad",[]);
|
|
return value;
|
|
},
|
|
getIframe:function(){
|
|
return this._contentobj.getElementsByTagName("iframe")[0];
|
|
},
|
|
getWindow:function(){
|
|
return this.getIframe().contentWindow;
|
|
}
|
|
}, webix.ui.view, webix.EventSystem);
|
|
|
|
webix.OverlayBox = {
|
|
showOverlay:function(message){
|
|
if (!this._overlay){
|
|
this._overlay = webix.html.create("DIV",{ "class":"webix_overlay" },(message||""));
|
|
webix.html.insertBefore(this._overlay, this._viewobj.firstChild, this._viewobj);
|
|
this._viewobj.style.position = "relative";
|
|
} else
|
|
this._overlay.innerHTML = message;
|
|
},
|
|
hideOverlay:function(){
|
|
if (this._overlay){
|
|
webix.html.remove(this._overlay);
|
|
this._overlay = null;
|
|
}
|
|
}
|
|
};
|
|
|
|
/*scrollable view with another view insize*/
|
|
webix.protoUI({
|
|
name:"scrollview",
|
|
defaults:{
|
|
scroll:"y",
|
|
scrollSpeed:"0ms"
|
|
},
|
|
$init:function(){
|
|
this._viewobj.className += " webix_scrollview";
|
|
},
|
|
body_setter:function(config){
|
|
config.borderless = true;
|
|
this._body_cell = webix.ui._view(config);
|
|
this._body_cell._parent_cell = this;
|
|
this._dataobj.appendChild(this._body_cell._viewobj);
|
|
},
|
|
getChildViews:function(){
|
|
return [this._body_cell];
|
|
},
|
|
getBody:function(){
|
|
return this._body_cell;
|
|
},
|
|
resizeChildren:function(){
|
|
this._desired_size = this._body_cell.$getSize(0, 0);
|
|
this._resizeChildren();
|
|
webix.callEvent("onResize",[]);
|
|
},
|
|
_resizeChildren:function(){
|
|
var scroll_size = this._native_scroll || webix.ui.scrollSize;
|
|
var cx = Math.max(this._content_width, this._desired_size[0]);
|
|
var cy = Math.max(this._content_height, this._desired_size[2]);
|
|
this._body_cell.$setSize(cx, cy);
|
|
this._dataobj.style.width = this._body_cell._content_width+"px";
|
|
this._dataobj.style.height = this._body_cell._content_height+"px";
|
|
if (webix.env.touch){
|
|
var state = this.getScrollState();
|
|
var top = this._body_cell._content_height - this._content_height;
|
|
if (top < state.y)
|
|
this.scrollTo(null, top);
|
|
}
|
|
},
|
|
$getSize:function(dx, dy){
|
|
var desired_size = this._desired_size = this._body_cell.$getSize(0, 0);
|
|
var self_sizes = webix.ui.view.prototype.$getSize.call(this, dx, dy);
|
|
var scroll_size = this._native_scroll || webix.ui.scrollSize;
|
|
|
|
if(this._settings.scroll=="x"){
|
|
self_sizes[2] = Math.max(self_sizes[2], desired_size[2]) + scroll_size;
|
|
self_sizes[3] = Math.min(self_sizes[3], desired_size[3]) + scroll_size;
|
|
} else if(this._settings.scroll=="y"){
|
|
self_sizes[0] = Math.max(self_sizes[0], desired_size[0]) + scroll_size;
|
|
self_sizes[1] = Math.min(self_sizes[1], desired_size[1]) + scroll_size;
|
|
}
|
|
return self_sizes;
|
|
},
|
|
$setSize:function(x,y){
|
|
var temp = webix.ui.scrollSize;
|
|
webix.ui.scrollSize = this._native_scroll || temp;
|
|
|
|
if (webix.ui.view.prototype.$setSize.call(this,x,y))
|
|
this._resizeChildren();
|
|
|
|
webix.ui.scrollSize = temp;
|
|
},
|
|
scroll_setter:function(value){
|
|
var custom = webix.env.$customScroll;
|
|
if (typeof value == "string" && value.indexOf("native-") === 0){
|
|
this._native_scroll = 17;
|
|
value = value.replace("native-");
|
|
webix.env.$customScroll = false;
|
|
}
|
|
|
|
value = webix.Scrollable.scroll_setter.call(this, value);
|
|
|
|
webix.env.$customScroll = custom;
|
|
return value;
|
|
},
|
|
_replace:function(new_view){
|
|
this._body_cell.destructor();
|
|
this._body_cell = new_view;
|
|
this._body_cell._parent_cell = this;
|
|
|
|
this._bodyobj.appendChild(this._body_cell._viewobj);
|
|
this.resize();
|
|
},
|
|
showView: function(id){
|
|
var topPos = webix.$$(id).$view.offsetTop-webix.$$(id).$view.parentNode.offsetTop;
|
|
this.scrollTo(0, topPos);
|
|
}
|
|
}, webix.Scrollable, webix.EventSystem, webix.ui.view);
|
|
|
|
/*
|
|
UI:TreeMenu
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
webix.TreeRenderStack={
|
|
$init:function(){
|
|
webix.assert(this.render,"TreeRenderStack :: Object must use RenderStack first");
|
|
},
|
|
_toHTMLItem:function(obj){
|
|
var mark = this.data._marks[obj.id];
|
|
this.callEvent("onItemRender",[obj]);
|
|
return this.type.templateStart(obj,this.type,mark)+(obj.$template?this.type["template"+obj.$template](obj,this.type,mark):this.type.template(obj,this.type,mark))+this.type.templateEnd();
|
|
},
|
|
_toHTMLItemObject:function(obj){
|
|
this._html.innerHTML = this._toHTMLItem(obj);
|
|
return this._html.firstChild;
|
|
},
|
|
//convert single item to HTML text (templating)
|
|
_toHTML:function(obj){
|
|
//check if related template exist
|
|
webix.assert((!obj.$template || this.type["template"+obj.$template]),"RenderStack :: Unknown template: "+obj.$template);
|
|
var html="<div class='webix_tree_branch_"+obj.$level+"'>"+this._toHTMLItem(obj);
|
|
|
|
if (obj.open)
|
|
html+=this._toHTMLLevel(obj.id);
|
|
|
|
html+="</div>";
|
|
|
|
return html;
|
|
},
|
|
_toHTMLLevel:function(id){
|
|
var html = "";
|
|
var leaves = this.data.branch[id];
|
|
if (leaves){
|
|
html+="<div class='webix_tree_leaves'>";
|
|
var last = leaves.length-1;
|
|
for (var i=0; i <= last; i++){
|
|
var obj = this.getItem(leaves[i]);
|
|
this.type._tree_branch_render_state[obj.$level] = (i == last);
|
|
html+=this._toHTML(obj);
|
|
}
|
|
html+="</div>";
|
|
}
|
|
return html;
|
|
},
|
|
//return true when some actual rendering done
|
|
render:function(id,data,type){
|
|
webix.TreeRenderStack._obj = this; //can be used from complex render
|
|
|
|
if (!this.isVisible(this._settings.id) || this.$blockRender)
|
|
return;
|
|
|
|
if (webix.debug_render)
|
|
webix.log("Render: "+this.name+"@"+this._settings.id);
|
|
|
|
if (id){
|
|
var cont;
|
|
var item = this.getItem(id);
|
|
if (type!="add"){
|
|
cont = this.getItemNode(id);
|
|
if (!cont) return;
|
|
}
|
|
|
|
switch(type){
|
|
case "branch":
|
|
var branch = cont.parentNode;
|
|
var node = this._toHTMLObject(item);
|
|
|
|
webix.html.insertBefore(node, branch);
|
|
webix.html.remove(branch);
|
|
this._htmlmap = null;
|
|
break;
|
|
case "paint":
|
|
case "update":
|
|
var node = this._htmlmap[id] = this._toHTMLItemObject(item);
|
|
webix.html.insertBefore(node, cont);
|
|
webix.html.remove(cont);
|
|
break;
|
|
case "delete":
|
|
//deleting not item , but full branch
|
|
webix.html.remove(cont.parentNode);
|
|
break;
|
|
case "add":
|
|
var parent;
|
|
//we want process both empty value and 0 as string
|
|
//jshint -W041:true
|
|
if (item.$parent == 0){
|
|
parent = this._dataobj.firstChild;
|
|
} else {
|
|
parent = this.getItemNode(item.$parent);
|
|
if (parent){
|
|
//when item created by the script, it will miss the container for child notes
|
|
//create it on demand
|
|
if (!parent.nextSibling){
|
|
var leafs = webix.html.create("DIV", { "class" : "webix_tree_leaves" },"");
|
|
parent.parentNode.appendChild(leafs);
|
|
}
|
|
parent = parent.nextSibling;
|
|
}
|
|
}
|
|
|
|
if (parent){
|
|
var next = this.data.getNextSiblingId(id);
|
|
next = this.getItemNode(next);
|
|
if (next)
|
|
next = next.parentNode;
|
|
|
|
var node = this._toHTMLObject(item);
|
|
this._htmlmap[id] = node.firstChild;
|
|
webix.html.insertBefore(node, next, parent);
|
|
}
|
|
break;
|
|
default:
|
|
return false;
|
|
}
|
|
this.callEvent("onPartialRender", [id,data,type]);
|
|
} else
|
|
//full reset
|
|
if (this.callEvent("onBeforeRender",[this.data])){
|
|
//will be used for lines management
|
|
this.type._tree_branch_render_state = [];
|
|
//getTopRange - returns all elements on top level
|
|
this._dataobj.innerHTML = this._toHTMLLevel(0);
|
|
|
|
this._htmlmap = null; //clear map, it will be filled at first getItemNode
|
|
this.callEvent("onAfterRender",[]);
|
|
}
|
|
|
|
//clear after usage
|
|
this.type._tree_branch_render_state = 0;
|
|
webix.TreeRenderStack._obj = null;
|
|
return true;
|
|
},
|
|
getItemNode:function(search_id){
|
|
if (this._htmlmap)
|
|
return this._htmlmap[search_id];
|
|
|
|
//fill map if it doesn't created yet
|
|
this._htmlmap={};
|
|
|
|
var t = this._dataobj.getElementsByTagName("DIV");
|
|
for (var i=0; i < t.length; i++){
|
|
var id = t[i].getAttribute(this._id); //get item's
|
|
if (id)
|
|
this._htmlmap[id]=t[i];
|
|
}
|
|
//call locator again, when map is filled
|
|
return this.getItemNode(search_id);
|
|
},
|
|
_branch_render_supported:1
|
|
};
|
|
|
|
|
|
|
|
/*
|
|
Behavior:SelectionModel - manage selection states
|
|
@export
|
|
select
|
|
unselect
|
|
selectAll
|
|
unselectAll
|
|
isSelected
|
|
getSelectedId
|
|
*/
|
|
webix.SelectionModel={
|
|
$init:function(){
|
|
//collection of selected IDs
|
|
this._selected = webix.toArray();
|
|
webix.assert(this.data, "SelectionModel :: Component doesn't have DataStore");
|
|
|
|
//remove selection from deleted items
|
|
this.data.attachEvent("onStoreUpdated",webix.bind(this._data_updated,this));
|
|
this.data.attachEvent("onStoreLoad", webix.bind(this._data_loaded,this));
|
|
this.data.attachEvent("onAfterFilter", webix.bind(this._data_filtered,this));
|
|
this.data.attachEvent("onIdChange", webix.bind(this._id_changed,this));
|
|
this.$ready.push(this._set_noselect);
|
|
},
|
|
_set_noselect: function(){
|
|
if (this._settings.select=="multiselect" || this._settings.multiselect)
|
|
webix.event(this.$view,"mousedown", function(e){
|
|
var shiftKey = (e||event).shiftKey;
|
|
if(shiftKey){
|
|
webix._noselect_element = this;
|
|
webix.html.addCss(this,"webix_noselect",1);
|
|
}
|
|
});
|
|
},
|
|
_id_changed:function(oldid, newid){
|
|
for (var i = this._selected.length - 1; i >= 0; i--)
|
|
if (this._selected[i]==oldid)
|
|
this._selected[i]=newid;
|
|
},
|
|
_data_filtered:function(){
|
|
for (var i = this._selected.length - 1; i >= 0; i--){
|
|
if (this.data.getIndexById(this._selected[i]) < 0) {
|
|
var id = this._selected[i];
|
|
this.removeCss(id, "webix_selected", true);
|
|
this._selected.splice(i,1);
|
|
this.callEvent("onSelectChange",[id]);
|
|
}
|
|
}
|
|
},
|
|
//helper - linked to onStoreUpdated
|
|
_data_updated:function(id,obj,type){
|
|
if (type == "delete"){ //remove selection from deleted items
|
|
if (this.loadBranch){
|
|
//hierarchy, need to check all
|
|
for (var i = this._selected.length - 1; i >= 0; i--)
|
|
if (!this.exists(this._selected[i]))
|
|
this._selected.splice(i,1);
|
|
} else
|
|
this._selected.remove(id);
|
|
}
|
|
else if (!id && !this.data.count() && !this.data._filter_order){ //remove selection for clearAll
|
|
this._selected = webix.toArray();
|
|
}
|
|
},
|
|
_data_loaded:function(){
|
|
if (this._settings.select)
|
|
this.data.each(function(obj){
|
|
if (obj && obj.$selected) this.select(obj.id);
|
|
}, this);
|
|
},
|
|
//helper - changes state of selection for some item
|
|
_select_mark:function(id,state,refresh,need_unselect){
|
|
var name = state ? "onBeforeSelect" : "onBeforeUnSelect";
|
|
if (!this.callEvent(name,[id,state])) return false;
|
|
|
|
if (need_unselect){
|
|
this._silent_selection = true;
|
|
this.unselectAll();
|
|
this._silent_selection = false;
|
|
}
|
|
|
|
if (state)
|
|
this.addCss(id, "webix_selected", true);
|
|
else
|
|
this.removeCss(id, "webix_selected", true);
|
|
|
|
if (refresh)
|
|
refresh.push(id); //if we in the mass-select mode - collect all changed IDs
|
|
else{
|
|
if (state)
|
|
this._selected.push(id); //then add to list of selected items
|
|
else
|
|
this._selected.remove(id);
|
|
this._refresh_selection(id); //othervise trigger repainting
|
|
}
|
|
|
|
var name = state ? "onAfterSelect" : "onAfterUnSelect";
|
|
this.callEvent(name,[id]);
|
|
|
|
return true;
|
|
},
|
|
//select some item
|
|
select:function(id,preserve){
|
|
var ctrlKey = arguments[2];
|
|
var shiftKey = arguments[3];
|
|
//if id not provide - works as selectAll
|
|
if (!id) return this.selectAll();
|
|
|
|
//allow an array of ids as parameter
|
|
if (webix.isArray(id)){
|
|
for (var i=0; i < id.length; i++)
|
|
this.select(id[i], (i?1:preserve), ctrlKey, shiftKey);
|
|
return;
|
|
}
|
|
|
|
webix.assert(this.data.exists(id), "Incorrect id in select command: "+id);
|
|
|
|
//block selection mode
|
|
if (shiftKey && this._selected.length)
|
|
return this.selectAll(this._selected[this._selected.length-1],id);
|
|
|
|
//single selection mode
|
|
var need_unselect = false;
|
|
if (!ctrlKey && !preserve && (this._selected.length!=1 || this._selected[0]!=id))
|
|
need_unselect = true;
|
|
|
|
if (!need_unselect && this.isSelected(id)){
|
|
if (ctrlKey) this.unselect(id); //ctrl-selection of already selected item
|
|
return;
|
|
}
|
|
|
|
this._select_mark(id, true, null, need_unselect);
|
|
},
|
|
//unselect some item
|
|
unselect:function(id){
|
|
//if id is not provided - unselect all items
|
|
if (!id) return this.unselectAll();
|
|
if (!this.isSelected(id)) return;
|
|
|
|
this._select_mark(id,false);
|
|
},
|
|
//select all items, or all in defined range
|
|
selectAll:function(from,to){
|
|
var range;
|
|
var refresh=[];
|
|
|
|
if (from||to)
|
|
range = this.data.getRange(from||null,to||null); //get limited set if bounds defined
|
|
else
|
|
range = this.data.getRange(); //get all items in other case
|
|
//in case of paging - it will be current page only
|
|
range.each(function(obj){
|
|
if (!this.data.getMark(obj.id, "webix_selected")){
|
|
this._selected.push(obj.id);
|
|
this._select_mark(obj.id,true,refresh);
|
|
}
|
|
},this);
|
|
//repaint self
|
|
this._refresh_selection(refresh);
|
|
},
|
|
//remove selection from all items
|
|
unselectAll:function(){
|
|
var refresh=[];
|
|
|
|
this._selected.each(function(id){
|
|
this._select_mark(id,false,refresh); //unmark selected only
|
|
},this);
|
|
|
|
this._selected=webix.toArray();
|
|
this._refresh_selection(refresh); //repaint self
|
|
},
|
|
//returns true if item is selected
|
|
isSelected:function(id){
|
|
return this._selected.find(id)!=-1;
|
|
},
|
|
/*
|
|
returns ID of selected items or array of IDs
|
|
to make result predictable - as_array can be used,
|
|
with such flag command will always return an array
|
|
empty array in case when no item was selected
|
|
*/
|
|
getSelectedId:function(as_array){
|
|
switch(this._selected.length){
|
|
case 0: return as_array?[]:"";
|
|
case 1: return as_array?[this._selected[0]]:this._selected[0];
|
|
default: return ([].concat(this._selected)); //isolation
|
|
}
|
|
},
|
|
getSelectedItem:function(as_array){
|
|
var sel = this.getSelectedId(true);
|
|
if (sel.length > 1 || as_array){
|
|
for (var i = sel.length - 1; i >= 0; i--)
|
|
sel[i] = this.getItem(sel[i]);
|
|
return sel;
|
|
} else if (sel.length)
|
|
return this.getItem(sel[0]);
|
|
},
|
|
//detects which repainting mode need to be used
|
|
_is_mass_selection:function(obj){
|
|
// crappy heuristic, but will do the job
|
|
return obj.length>100 || obj.length > this.data.count/2;
|
|
},
|
|
_refresh_selection:function(refresh){
|
|
if (typeof refresh != "object") refresh = [refresh];
|
|
if (!refresh.length) return; //nothing to repaint
|
|
|
|
if (this._is_mass_selection(refresh))
|
|
this.data.refresh(); //many items was selected - repaint whole view
|
|
else
|
|
for (var i=0; i < refresh.length; i++) //repaint only selected
|
|
this.render(refresh[i],this.data.getItem(refresh[i]),"update");
|
|
|
|
if (!this._silent_selection)
|
|
this.callEvent("onSelectChange",[refresh]);
|
|
}
|
|
};
|
|
|
|
webix.ready(function(){
|
|
webix.event(document.body,"mouseup", function(e){
|
|
if(webix._noselect_element){
|
|
webix.html.removeCss(webix._noselect_element,"webix_noselect");
|
|
webix._noselect_element = null;
|
|
}
|
|
});
|
|
});
|
|
/*
|
|
Behavior:DataMove - allows to move and copy elements, heavily relays on DataStore.move
|
|
@export
|
|
copy
|
|
move
|
|
*/
|
|
webix.TreeDataMove={
|
|
$init:function(){
|
|
webix.assert(this.data, "DataMove :: Component doesn't have DataStore");
|
|
},
|
|
//creates a copy of the item
|
|
copy:function(sid,tindex,tobj,details){
|
|
details = details || {};
|
|
details.copy = true;
|
|
return this.move(sid, tindex, tobj, details);
|
|
},
|
|
_next_move_index:function(nid, next, source){
|
|
if (next && nid){
|
|
var new_index = this.getBranchIndex(nid);
|
|
return new_index+(source == this && source.getBranchIndex(next)<new_index?0:1);
|
|
}
|
|
},
|
|
_check_branch_child:function(parent, child){
|
|
var t = this.data.branch[parent];
|
|
if (t && t.length){
|
|
for (var i=0; i < t.length; i++) {
|
|
if (t[i] == child) return true;
|
|
if (this._check_branch_child(t[i], child)) return true;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
//move item to the new position
|
|
move:function(sid,tindex,tobj, details){
|
|
details = details || {};
|
|
tindex = tindex || 0;
|
|
var new_id = details.newId || sid;
|
|
var target_parent = details.parent || 0;
|
|
|
|
tobj = tobj||this;
|
|
webix.assert(tobj.data, "moving attempt to component without datastore");
|
|
if (!tobj.data) return;
|
|
|
|
if (webix.isArray(sid)){
|
|
for (var i=0; i < sid.length; i++) {
|
|
//increase index for each next item in the set, so order of insertion will be equal to order in the array
|
|
var nid = this.move(sid[i], tindex, tobj, details);
|
|
tindex = tobj._next_move_index(nid, sid[i+1], this);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (this != tobj || details.copy){
|
|
new_id = tobj.data.add(tobj._externalData(this.getItem(sid),new_id), tindex, (target_parent || 0));
|
|
if (this.data.branch[sid] && tobj.getBranchIndex){
|
|
var temp = this.data._scheme_serialize;
|
|
this.data._scheme_serialize = function(obj){
|
|
var copy = webix.copy(obj);
|
|
delete copy.$parent; delete copy.$level; delete copy.$child;
|
|
if (tobj.data.pull[copy.id])
|
|
copy.id = webix.uid();
|
|
return copy;
|
|
};
|
|
var copy_data = { data:this.serialize(sid, true), parent:new_id };
|
|
this.data._scheme_serialize = temp;
|
|
tobj.parse(copy_data);
|
|
}
|
|
if (!details.copy)
|
|
this.data.remove(sid);
|
|
} else {
|
|
//move in self
|
|
if (sid == target_parent || this._check_branch_child(sid,target_parent)) return;
|
|
|
|
var source = this.getItem(sid);
|
|
var tbranch = this.data.branch[target_parent];
|
|
if (!tbranch)
|
|
tbranch = this.data.branch[target_parent] = [];
|
|
var sbranch = this.data.branch[source.$parent];
|
|
|
|
var sindex = webix.PowerArray.find.call(sbranch, sid);
|
|
if (tindex < 0) tindex = Math.max(tbranch.length - 1, 0);
|
|
//in the same branch
|
|
if (sbranch === tbranch && tindex === sindex) return; //same position
|
|
|
|
webix.PowerArray.removeAt.call(sbranch, sindex);
|
|
webix.PowerArray.insertAt.call(tbranch, sid, Math.min(tbranch.length, tindex));
|
|
|
|
if (!sbranch.length)
|
|
delete this.data.branch[source.$parent];
|
|
|
|
|
|
if(source.$parent && source.$parent != "0")
|
|
this.getItem(source.$parent).$count--;
|
|
|
|
if (target_parent && target_parent != "0"){
|
|
var target = tobj.getItem(target_parent);
|
|
target.$count++;
|
|
this._set_level_rec(source, target.$level+1);
|
|
} else
|
|
this._set_level_rec(source, 1);
|
|
|
|
source.$parent = target_parent;
|
|
tobj.data.callEvent("onDataMove", [sid, tindex, target_parent, tbranch[tindex+1]]);
|
|
}
|
|
|
|
this.refresh();
|
|
return new_id; //return ID of item after moving
|
|
},
|
|
_set_level_rec:function(item, value){
|
|
item.$level = value;
|
|
var branch = this.data.branch[item.id];
|
|
if (branch)
|
|
for (var i=0; i<branch.length; i++)
|
|
this._set_level_rec(this.getItem(branch[i]), value+1);
|
|
},
|
|
//reaction on pause during dnd
|
|
_drag_pause:function(id){
|
|
if (id && !id.header) //ignore drag other header
|
|
this.open(id);
|
|
},
|
|
$dropAllow:function(context){
|
|
if (context.from != context.to) return true;
|
|
for (var i=0; i<context.source.length; i++)
|
|
if (context.source == context.target || this._check_branch_child(context.source, context.target)) return false;
|
|
|
|
return true;
|
|
},
|
|
/*
|
|
this is a stub for future functionality
|
|
currently it just makes a copy of data object, which is enough for current situation
|
|
*/
|
|
_externalData:function(data,id){
|
|
var new_data = webix.DataMove._externalData.call(this, data, id);
|
|
delete new_data.open;
|
|
return new_data;
|
|
}
|
|
};
|
|
|
|
|
|
|
|
|
|
webix.TreeDataLoader = {
|
|
$init:function(){
|
|
this.data.attachEvent("onStoreUpdated", webix.bind(this._sync_hierarchy, this), null, true);
|
|
|
|
// #FIXME: constructor call chain
|
|
//redefine methods
|
|
this._feed_common = this._feed_commonA;
|
|
},
|
|
_feed_commonA:function(id, count, callback, url){
|
|
// branch loading
|
|
var details = (count === 0?{parent: encodeURIComponent(id)}:null);
|
|
|
|
webix.DataLoader.prototype._feed_common.call(this,id, count, callback, url, details);
|
|
},
|
|
//load next set of data rows
|
|
loadBranch:function(id, callback, url){
|
|
id = id ||0;
|
|
this.data.url = this.data.url || url;
|
|
if (this.callEvent("onDataRequest", [id,callback,this.data.url]) && this.data.url)
|
|
this.data.feed.call(this, id, 0, callback, url);
|
|
},
|
|
_sync_hierarchy:function(id, data, mode){
|
|
if (!mode || mode == "add" || mode == "delete" || mode == "branch"){
|
|
this.data._sync_to_order(this);
|
|
}
|
|
}
|
|
};
|
|
|
|
webix.TreeStore = {
|
|
name:"TreeStore",
|
|
$init:function() {
|
|
this._filterMode={
|
|
//level:1,
|
|
showSubItems:true
|
|
};
|
|
this.branch = { 0:[] };
|
|
this.attachEvent("onParse", function(driver, data){
|
|
this._set_child_scheme(driver.child);
|
|
var parent = driver.getInfo(data)._parent;
|
|
});
|
|
this.attachEvent("onClearAll", webix.bind(function(){
|
|
this._filter_branch = null;
|
|
},this));
|
|
},
|
|
filterMode_setter:function(mode){
|
|
return webix.extend(this._filterMode, mode, true);
|
|
},
|
|
_filter_reset:function(preserve){
|
|
//remove previous filtering , if any
|
|
if (this._filter_branch && !preserve){
|
|
this.branch = this._filter_branch;
|
|
this.order = webix.toArray(webix.copy(this.branch[0]));
|
|
for (var key in this.branch)
|
|
if (key != "0") //exclude 0 - virtual root
|
|
this.getItem(key).$count = this.branch[key].length;
|
|
delete this._filter_branch;
|
|
}
|
|
},
|
|
_filter_core:function(filter, value, preserve, filterMode){
|
|
//for tree we have few filtering options
|
|
//- filter leafs only
|
|
//- filter data on specific level
|
|
//- filter data on all levels
|
|
//- in all cases we can show or hide empty folder
|
|
//- in all cases we can show or hide childs for matched item
|
|
|
|
//set new order of items, store original
|
|
if (!preserve || !this._filter_branch){
|
|
this._filter_branch = this.branch;
|
|
this.branch = webix.clone(this.branch);
|
|
}
|
|
|
|
this.branch[0] = this._filter_branch_rec(filter, value, this.branch[0], 1, (filterMode||{}));
|
|
},
|
|
_filter_branch_rec:function(filter, value, branch, level, config){
|
|
//jshint -W041
|
|
var neworder = [];
|
|
|
|
var allow = (config.level && config.level != level);
|
|
|
|
for (var i=0; i < branch.length; i++){
|
|
var id = branch[i];
|
|
var item = this.getItem(id);
|
|
var child_run = false;
|
|
var sub = this.branch[id];
|
|
|
|
if (allow){
|
|
child_run = true;
|
|
} else if (filter(this.getItem(id),value)){
|
|
neworder.push(id);
|
|
// open all parents of the found item
|
|
if (config.openParents !== false){
|
|
var parentId = this.getParentId(id);
|
|
while(parentId && parentId != "0"){
|
|
this.getItem(parentId).open = 1;
|
|
parentId = this.getParentId(parentId);
|
|
}
|
|
}
|
|
//in case of of fixed level filtering - do not change child-items
|
|
if (config.level || config.showSubItems)
|
|
continue;
|
|
} else {
|
|
//filtering level, not match
|
|
child_run = true;
|
|
}
|
|
|
|
//if "filter by all levels" - filter childs
|
|
if (allow || !config.level){
|
|
if (sub){
|
|
var newsub = this.branch[id] = this._filter_branch_rec(filter, value, sub, level+1, config);
|
|
item.$count = newsub.length;
|
|
if (child_run && newsub.length)
|
|
neworder.push(id);
|
|
}
|
|
}
|
|
}
|
|
return neworder;
|
|
},
|
|
count:function(){
|
|
if (this.order.length)
|
|
return this.order.length;
|
|
|
|
//we must return some non-zero value, or logic of selection will think that we have not data at all
|
|
var count=0;
|
|
this.eachOpen(function(){ count++; });
|
|
return count;
|
|
},
|
|
changeId:function(old, newid){
|
|
if (this.branch[old]){
|
|
var branch = this.branch[newid] = this.branch[old];
|
|
for (var i = 0; i < branch.length; i++)
|
|
this.getItem(branch[i]).$parent = newid;
|
|
delete this.branch[old];
|
|
}
|
|
var parent = this.getItem(old).$parent;
|
|
if (parent !== "0"){
|
|
var index = webix.PowerArray.find.call(this.branch[parent], old);
|
|
this.branch[parent][index] = newid;
|
|
}
|
|
return webix.DataStore.prototype.changeId.call(this, old, newid);
|
|
},
|
|
clearAll:function(){
|
|
this.branch = { 0:[] };
|
|
webix.DataStore.prototype.clearAll.call(this);
|
|
},
|
|
getPrevSiblingId:function(id){
|
|
var order = this.branch[this.getItem(id).$parent];
|
|
var pos = webix.PowerArray.find.call(order, id)-1;
|
|
if (pos>=0)
|
|
return order[pos];
|
|
return null;
|
|
},
|
|
getNextSiblingId:function(id){
|
|
var order = this.branch[this.getItem(id).$parent];
|
|
var pos = webix.PowerArray.find.call(order, id)+1;
|
|
if (pos<order.length)
|
|
return order[pos];
|
|
return null;
|
|
},
|
|
getParentId:function(id){
|
|
return this.getItem(id).$parent;
|
|
},
|
|
getFirstChildId:function(id){
|
|
var order = this.branch[id];
|
|
if (order && order.length)
|
|
return order[0];
|
|
return null;
|
|
},
|
|
isBranch:function(parent){
|
|
return !!this.branch[parent];
|
|
},
|
|
getBranchIndex:function(child){
|
|
var t = this.branch[this.pull[child].$parent];
|
|
return webix.PowerArray.find.call(t, child);
|
|
},
|
|
_set_child_scheme:function(parse_name){
|
|
|
|
if (typeof parse_name == "string")
|
|
this._datadriver_child = function(obj){
|
|
var t = obj[parse_name];
|
|
if (t)
|
|
delete obj[parse_name];
|
|
return t;
|
|
};
|
|
else
|
|
this._datadriver_child = parse_name;
|
|
},
|
|
_inner_parse:function(info, recs){
|
|
var parent = info._parent || 0;
|
|
|
|
for (var i=0; i<recs.length; i++){
|
|
//get hash of details for each record
|
|
var temp = this.driver.getDetails(recs[i]);
|
|
var id = this.id(temp); //generate ID for the record
|
|
var update = !!this.pull[id]; //update mode
|
|
|
|
if (update){
|
|
temp = webix.extend(this.pull[id], temp, true);
|
|
if (this._scheme_update)
|
|
this._scheme_update(temp);
|
|
} else {
|
|
if (this._scheme_init)
|
|
this._scheme_init(temp);
|
|
this.pull[id]=temp;
|
|
}
|
|
|
|
this._extraParser(temp, parent, 0, update, info._from*1+i);
|
|
}
|
|
|
|
//fix state of top item after data loading
|
|
var pItem = this.pull[parent] || {};
|
|
var pBranch = this.branch[parent] || [];
|
|
pItem.$count = pBranch.length;
|
|
delete pItem.webix_kids;
|
|
|
|
if (info._size && info._size != pBranch.length)
|
|
pBranch[info._size] = null;
|
|
},
|
|
_extraParser:function(obj, parent, level, update, from){
|
|
//processing top item
|
|
obj.$count = 0;
|
|
obj.$parent = parent||0;
|
|
obj.$level = level||(parent!="0"?this.pull[parent].$level+1:1);
|
|
|
|
var parent_branch = this.branch[obj.$parent];
|
|
if (!parent_branch)
|
|
parent_branch = this.branch[obj.$parent] = [];
|
|
if (this._filter_branch)
|
|
this._filter_branch[obj.$parent] = parent_branch;
|
|
|
|
if (!update){
|
|
var pos = from || parent_branch.length;
|
|
parent_branch[pos] = obj.id;
|
|
}
|
|
|
|
var child = this._datadriver_child(obj);
|
|
|
|
if (obj.webix_kids){
|
|
return (obj.$count = -1);
|
|
}
|
|
|
|
if (!child) //ignore childless
|
|
return (obj.$count = 0);
|
|
|
|
//when loading from xml we can have a single item instead of an array
|
|
if (!webix.isArray(child))
|
|
child = [child];
|
|
|
|
|
|
for (var i=0; i < child.length; i++) {
|
|
//extra processing to convert strings to objects
|
|
var item = webix.DataDriver.json.getDetails(child[i]);
|
|
var itemid = this.id(item);
|
|
update = !!this.pull[itemid];
|
|
|
|
if (update){
|
|
item = webix.extend(this.pull[itemid], item, true);
|
|
if (this._scheme_update)
|
|
this._scheme_update(item);
|
|
} else {
|
|
if (this._scheme_init)
|
|
this._scheme_init(item);
|
|
this.pull[itemid]=item;
|
|
}
|
|
this._extraParser(item, obj.id, obj.$level+1, update);
|
|
}
|
|
|
|
//processing childrens
|
|
var branch = this.branch[obj.id];
|
|
if (branch)
|
|
obj.$count = branch.length;
|
|
},
|
|
_sync_to_order:function(master){
|
|
this.order = webix.toArray();
|
|
this._sync_each_child(0, master);
|
|
},
|
|
_sync_each_child:function(start, master){
|
|
var branch = this.branch[start];
|
|
for (var i=0; i<branch.length; i++){
|
|
var id = branch[i];
|
|
this.order.push(id);
|
|
var item = this.pull[id];
|
|
if (item){
|
|
if (item.open){
|
|
if (item.$count == -1)
|
|
master.loadBranch(id);
|
|
else if (item.$count)
|
|
this._sync_each_child(id, master);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
provideApi:function(target,eventable){
|
|
var list = ["getPrevSiblingId","getNextSiblingId","getParentId","getFirstChildId","isBranch","getBranchIndex","filterMode_setter"];
|
|
for (var i=0; i < list.length; i++)
|
|
target[list[i]]=this._methodPush(this,list[i]);
|
|
|
|
if (!target.getIndexById)
|
|
webix.DataStore.prototype.provideApi.call(this, target, eventable);
|
|
},
|
|
getTopRange:function(){
|
|
return webix.toArray([].concat(this.branch[0])).map(function(id){
|
|
return this.getItem(id);
|
|
}, this);
|
|
},
|
|
eachChild:function(id, functor, master, all){
|
|
var branch = this.branch;
|
|
if (all && this._filter_branch)
|
|
branch = this._filter_branch;
|
|
|
|
var stack = branch[id];
|
|
if (stack)
|
|
for (var i=0; i<stack.length; i++)
|
|
functor.call((master||this), this.getItem(stack[i]));
|
|
},
|
|
each:function(method,master, all, id){
|
|
this.eachChild((id||0), function(item){
|
|
var branch = this.branch;
|
|
|
|
method.call((master||this), item);
|
|
|
|
if (all && this._filter_branch)
|
|
branch = this._filter_branch;
|
|
|
|
if (branch[item.id])
|
|
this.each(method, master, all, item.id);
|
|
}, this, all);
|
|
},
|
|
eachOpen:function(method,master, id){
|
|
this.eachChild((id||0), function(item){
|
|
method.call((master||this), item);
|
|
if (this.branch[item.id] && item.open)
|
|
this.eachOpen(method, master, item.id);
|
|
});
|
|
},
|
|
eachSubItem:function(id, functor){
|
|
var top = this.branch[id||0];
|
|
if (top)
|
|
for (var i=0; i<top.length; i++){
|
|
var key = top[i];
|
|
if (this.branch[key]){
|
|
functor.call(this, this.getItem(key),true);
|
|
this.eachSubItem(key, functor);
|
|
} else
|
|
functor.call(this, this.getItem(key), false);
|
|
}
|
|
},
|
|
eachLeaf:function(id, functor){
|
|
var top = this.branch[id||0];
|
|
if (top)
|
|
for (var i=0; i<top.length; i++){
|
|
var key = top[i];
|
|
if (this.branch[key]){
|
|
this.eachLeaf(key, functor);
|
|
} else
|
|
functor.call(this, this.getItem(key), false);
|
|
}
|
|
},
|
|
_sort_core:function(sort, order){
|
|
var sorter = this.sorting.create(sort);
|
|
for (var key in this.branch){
|
|
var bset = this.branch[key];
|
|
var data = [];
|
|
|
|
for (var i=0; i<bset.length; i++)
|
|
data.push(this.pull[bset[i]]);
|
|
|
|
data.sort(sorter);
|
|
|
|
for (var i=0; i<bset.length; i++)
|
|
data[i] = data[i].id;
|
|
|
|
this.branch[key] = data;
|
|
}
|
|
return order;
|
|
},
|
|
add:function(obj, index, pid){
|
|
var refresh_parent = false;
|
|
|
|
var parent = this.getItem(pid||0);
|
|
if(parent){
|
|
//when adding items to leaf item - it need to be repainted
|
|
if (!this.branch[parent.id])
|
|
refresh_parent = true;
|
|
parent.$count++;
|
|
}
|
|
|
|
this.branch[pid||0] = this.order = webix.toArray(this.branch[pid||0]);
|
|
|
|
obj.$count = 0;
|
|
obj.$level= (parent?parent.$level+1:1);
|
|
obj.$parent = (parent?parent.id:0);
|
|
|
|
if (this._filter_branch){ //adding during filtering
|
|
var origin = this._filter_branch[pid||0];
|
|
//newly created branch
|
|
if (!origin) origin = this._filter_branch[pid] = this.order;
|
|
|
|
//branch can be shared bettwen collections, ignore such cases
|
|
if (this.order !== origin){
|
|
//we can't know the location of new item in full dataset, making suggestion
|
|
//put at end by default
|
|
var original_index = origin.length;
|
|
//put at start only if adding to the start and some data exists
|
|
if (!index && this.branch[pid||0].length)
|
|
original_index = 0;
|
|
|
|
origin = webix.toArray(origin);
|
|
origin.insertAt(obj.id,original_index);
|
|
}
|
|
}
|
|
|
|
//call original adding logic
|
|
var result = webix.DataStore.prototype.add.call(this, obj, index);
|
|
|
|
|
|
if (refresh_parent)
|
|
this.refresh(pid);
|
|
|
|
return result;
|
|
},
|
|
_rec_remove:function(id, inner){
|
|
var obj = this.pull[id];
|
|
if(this.branch[obj.id] && this.branch[obj.id].length > 0){
|
|
var branch = this.branch[id];
|
|
for(var i=0;i<branch.length;i++)
|
|
this._rec_remove(branch[i], true);
|
|
}
|
|
delete this.branch[id];
|
|
if(this._filter_branch)
|
|
delete this._filter_branch[id];
|
|
delete this.pull[id];
|
|
if (this._marks[id])
|
|
delete this._marks[id];
|
|
},
|
|
_filter_removed:function(pull, parentId, id){
|
|
var branch = pull[parentId];
|
|
if (branch.length == 1 && branch[0] == id && parentId){
|
|
delete pull[parentId];
|
|
} else
|
|
webix.toArray(branch).remove(id);
|
|
},
|
|
remove:function(id){
|
|
webix.assert(this.exists(id), "Not existing ID in remove command"+id);
|
|
var obj = this.pull[id];
|
|
var parentId = (obj.$parent||0);
|
|
|
|
if (this.callEvent("onBeforeDelete",[id]) === false) return false;
|
|
this._rec_remove(id);
|
|
this.callEvent("onAfterDelete",[id]);
|
|
|
|
var parent = this.pull[parentId];
|
|
this._filter_removed(this.branch, parentId, id);
|
|
if (this._filter_branch)
|
|
this._filter_removed(this._filter_branch, parentId, id);
|
|
|
|
var refresh_parent = 0;
|
|
if (parent){
|
|
parent.$count--;
|
|
if (parent.$count<=0){
|
|
parent.$count=0;
|
|
parent.open = 0;
|
|
refresh_parent = 1;
|
|
}
|
|
}
|
|
|
|
//repaint signal
|
|
this.callEvent("onStoreUpdated",[id,obj,"delete"]);
|
|
if (refresh_parent)
|
|
this.refresh(parent.id);
|
|
},
|
|
/*
|
|
serializes data to a json object
|
|
*/
|
|
getBranch:function(id){
|
|
var out = [];
|
|
var items = (this._filter_branch || this.branch)[id];
|
|
if (items)
|
|
for (var i = 0; i < items.length; i++) out[i] = this.pull[items[i]];
|
|
|
|
return out;
|
|
},
|
|
serialize: function(id, all){
|
|
var coll = this.branch;
|
|
//use original collection of branches
|
|
if (all && this._filter_branch) coll = this._filter_branch;
|
|
|
|
var ids = this.branch[id||0];
|
|
var result = [];
|
|
for(var i=0; i< ids.length;i++) {
|
|
var obj = this.pull[ids[i]];
|
|
var rel;
|
|
|
|
if (this._scheme_serialize){
|
|
rel = this._scheme_serialize(obj);
|
|
if (rel===false) continue;
|
|
} else
|
|
rel = webix.copy(obj);
|
|
|
|
if (this.branch[obj.id])
|
|
rel.data = this.serialize(obj.id, all);
|
|
|
|
result.push(rel);
|
|
}
|
|
return result;
|
|
}
|
|
};
|
|
|
|
|
|
webix.TreeType={
|
|
space:function(obj,common){
|
|
var html = "";
|
|
for (var i=1; i<obj.$level; i++)
|
|
html += "<div class='webix_tree_none'></div>";
|
|
return html;
|
|
},
|
|
icon:function(obj,common){
|
|
if (obj.$count){
|
|
if (obj.open)
|
|
return "<div class='webix_tree_open'></div>";
|
|
else
|
|
return "<div class='webix_tree_close'></div>";
|
|
} else
|
|
return "<div class='webix_tree_none'></div>";
|
|
},
|
|
checkbox:function(obj, common){
|
|
if(obj.nocheckbox)
|
|
return "";
|
|
return "<input type='checkbox' class='webix_tree_checkbox' "+(obj.checked?"checked":"")+(obj.disabled?" disabled":"")+">";
|
|
},
|
|
folder:function(obj, common){
|
|
if (obj.icon)
|
|
return "<div class='webix_tree_file webix_tree_"+obj.icon+"'></div>";
|
|
|
|
if (obj.$count){
|
|
if (obj.open)
|
|
return "<div class='webix_tree_folder_open'></div>";
|
|
else
|
|
return "<div class='webix_tree_folder'></div>";
|
|
}
|
|
return "<div class='webix_tree_file'></div>";
|
|
}
|
|
};
|
|
|
|
webix.TreeAPI = {
|
|
open: function(id, show) {
|
|
if (!id) return;
|
|
//ignore open for leaf items
|
|
var item = this.getItem(id);
|
|
if (!item.$count || item.open) return;
|
|
|
|
if (this.callEvent("onBeforeOpen",[id])){
|
|
item.open=true;
|
|
this.data.callEvent("onStoreUpdated",[id, 0, "branch"]);
|
|
this.callEvent("onAfterOpen",[id]);
|
|
}
|
|
|
|
if (show && id != "0")
|
|
this.open(this.getParentId(id), show);
|
|
},
|
|
close: function(id) {
|
|
if (!id) return;
|
|
var item = this.getItem(id);
|
|
if (!item.open) return;
|
|
|
|
if (this.callEvent("onBeforeClose",[id])){
|
|
item.open=false;
|
|
this.data.callEvent("onStoreUpdated",[id, 0, "branch"]);
|
|
this.callEvent("onAfterClose",[id]);
|
|
}
|
|
},
|
|
openAll: function(id){
|
|
this.data.eachSubItem((id||0), function(obj, branch){
|
|
if (branch)
|
|
obj.open = true;
|
|
});
|
|
this.data.refresh();
|
|
},
|
|
closeAll: function(id){
|
|
this.data.eachSubItem((id||0), function(obj, branch){
|
|
if (branch)
|
|
obj.open = false;
|
|
});
|
|
this.data.refresh();
|
|
},
|
|
_tree_check_uncheck:function(id,mode,e){
|
|
if(this._settings.threeState)
|
|
return this._tree_check_uncheck_3(id,(mode !== null?mode:""));
|
|
|
|
var value,
|
|
item = this.getItem(id),
|
|
trg = (e? (e.target|| e.srcElement):null);
|
|
|
|
//read actual value from HTML tag when possible
|
|
//as it can be affected by dbl-clicks
|
|
if(trg && trg.type == "checkbox")
|
|
value = trg.checked?true:false;
|
|
else
|
|
value = (mode !== null?mode:!item.checked);
|
|
|
|
item.checked = value;
|
|
this.callEvent("onItemCheck", [id, item.checked, e]);
|
|
},
|
|
isBranchOpen:function(search_id){
|
|
if (search_id == "0") return true;
|
|
|
|
var item = this.getItem(search_id);
|
|
if (item.open)
|
|
return this.isBranchOpen(item.$parent);
|
|
return false;
|
|
},
|
|
getOpenItems: function() {
|
|
var open = [];
|
|
for (var id in this.data.branch) {
|
|
if (this.exists(id) && this.getItem(id).open)
|
|
open.push(id);
|
|
}
|
|
return open;
|
|
},
|
|
getState: function(){
|
|
return {
|
|
open: this.getOpenItems(),
|
|
select: this.getSelectedId(true)
|
|
};
|
|
},
|
|
_repeat_set_state:function(tree, open){
|
|
var event = this.data.attachEvent("onStoreLoad", function(){
|
|
tree.setState.call(tree,open);
|
|
tree.data.detachEvent(event);
|
|
tree = null;
|
|
});
|
|
},
|
|
setState: function(state){
|
|
var repeat = false;
|
|
var dyn = false;
|
|
|
|
if (state.open){
|
|
this.closeAll();
|
|
var open = state.open;
|
|
for (var i = 0; i < open.length; i++){
|
|
var item = this.getItem(open[i]);
|
|
if (item && item.$count){
|
|
item.open=true;
|
|
//dynamic loading
|
|
if (item.$count == -1){
|
|
//call the same method after data loading
|
|
this._repeat_set_state(this, state);
|
|
this.refresh();
|
|
return 0;
|
|
//end processing
|
|
}
|
|
}
|
|
}
|
|
this.refresh();
|
|
}
|
|
|
|
|
|
if (state.select && this.select){
|
|
var select = state.select;
|
|
this.unselect();
|
|
for (var i = 0; i < select.length; i++)
|
|
if (this.exists(select[i]))
|
|
this.select(select[i], true);
|
|
}
|
|
|
|
return 1;
|
|
}
|
|
};
|
|
|
|
webix.TreeClick = {
|
|
webix_tree_open:function(e, id){
|
|
this.close(id);
|
|
return false;
|
|
},
|
|
webix_tree_close:function(e, id){
|
|
this.open(id);
|
|
return false;
|
|
},
|
|
webix_tree_checkbox:function(e,id){
|
|
this._tree_check_uncheck(id, null, e);
|
|
return false;
|
|
}
|
|
};
|
|
|
|
webix.TreeCollection = webix.proto({
|
|
name:"TreeCollection",
|
|
$init:function(){
|
|
webix.extend(this.data, webix.TreeStore, true);
|
|
this.data.provideApi(this,true);
|
|
webix.extend(this, webix.TreeDataMove, true);
|
|
}
|
|
}, webix.TreeDataLoader, webix.DataCollection);
|
|
|
|
/*
|
|
Behavior:DragItem - adds ability to move items by dnd
|
|
|
|
dnd context can have next properties
|
|
from - source object
|
|
to - target object
|
|
source - id of dragged item(s)
|
|
target - id of drop target, null for drop on empty space
|
|
start - id from which DND was started
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
webix.DragOrder={
|
|
_do_not_drag_selection:true,
|
|
$drag:function(s,e){
|
|
var html = webix.DragItem.$drag.call(this,s,e);
|
|
if (html){
|
|
var context = webix.DragControl.getContext();
|
|
if (this.getBranchIndex)
|
|
this._drag_order_stored_left = this._drag_order_complex?((this.getItem(context.start).$level) * 16):0;
|
|
if (!context.fragile)
|
|
this.addCss(context.start, "webix_transparent");
|
|
}
|
|
return html;
|
|
},
|
|
_getDragItemPos: function(pos,e){
|
|
return webix.DragItem._getDragItemPos(pos,e);
|
|
},
|
|
$dragPos:function(pos,e, node){
|
|
var box = webix.html.offset(this.$view);
|
|
var left = box.x + (this._drag_order_complex?( + box.width - webix.ui.scrollSize - 1):1);
|
|
var top = pos.y;
|
|
var xdrag = (this._settings.layout == "x");
|
|
|
|
if (xdrag){
|
|
top = box.y + (this._drag_order_complex?( + box.height - webix.ui.scrollSize - 1):1);
|
|
left = pos.x;
|
|
}
|
|
|
|
node.style.display = 'none';
|
|
var html = document.elementFromPoint(left, top);
|
|
|
|
if (html != this._last_sort_dnd_node){
|
|
var view = webix.$$(html);
|
|
//this type of dnd is limited to the self
|
|
if (view && view == this){
|
|
var id = this.locate(html, true);
|
|
var start_id = webix.DragControl.getContext().start;
|
|
if (id){
|
|
if (id != this._last_sort_dnd_node){
|
|
if (id != start_id){
|
|
var details, index;
|
|
|
|
if (this.getBranchIndex){
|
|
details = { parent:this.getParentId(id) };
|
|
index = this.getBranchIndex(id);
|
|
} else {
|
|
details = {};
|
|
index = this.getIndexById(id);
|
|
}
|
|
|
|
if (this.callEvent("onBeforeDropOrder",[start_id, index, e, details])){
|
|
this.move(start_id, index, this, details);
|
|
this._last_sort_dnd_node = id;
|
|
}
|
|
}
|
|
webix.DragControl._last = this._contentobj;
|
|
}
|
|
}
|
|
else {
|
|
id = "$webix-last";
|
|
if (this._last_sort_dnd_node != id){
|
|
if (!this.callEvent("onBeforeDropOrder",[start_id, -1, e, { parent: 0} ])) return;
|
|
this._last_sort_dnd_node = id;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
node.style.display = 'block';
|
|
|
|
|
|
if (xdrag){
|
|
pos.y = box.y;
|
|
pos.x = pos.x-18;
|
|
|
|
if (pos.x < box.x)
|
|
pos.x = box.x;
|
|
else {
|
|
var max = box.x + this.$view.offsetWidth - 60;
|
|
if (pos.x > max)
|
|
pos.x = max;
|
|
}
|
|
} else {
|
|
box.y += this._header_height;
|
|
pos.x = this._drag_order_stored_left||box.x;
|
|
pos.y = pos.y-18;
|
|
|
|
if (pos.y < box.y)
|
|
pos.y = box.y;
|
|
else {
|
|
var max = box.y + this.$view.offsetHeight - 60;
|
|
if (pos.y > max)
|
|
pos.y = max;
|
|
}
|
|
}
|
|
|
|
//prevent normal dnd landing checking
|
|
webix.DragControl._skip = true;
|
|
},
|
|
$dragIn:function(){
|
|
return false;
|
|
},
|
|
$drop:function(s,t,e){
|
|
var context = webix.DragControl.getContext();
|
|
var id = context.start;
|
|
this.removeCss(id, "webix_transparent");
|
|
|
|
var index = this.getIndexById(id);
|
|
this.callEvent("onAfterDropOrder",[id, index , e]);
|
|
if (context.fragile)
|
|
this.refresh();
|
|
}
|
|
};
|
|
webix.DragItem={
|
|
//helper - defines component's container as active zone for dragging and for dropping
|
|
_initHandlers:function(obj, source, target){
|
|
if (!source) webix.DragControl.addDrop(obj._contentobj,obj,true);
|
|
if (!target) webix.DragControl.addDrag(obj._contentobj,obj);
|
|
|
|
this.attachEvent("onDragOut",function(a,b){ this.$dragMark(a,b); });
|
|
},
|
|
drag_setter:function(value){
|
|
if (value){
|
|
if (value == "order")
|
|
webix.extend(this, webix.DragOrder, true);
|
|
if (value == "inner")
|
|
this._inner_drag_only = true;
|
|
|
|
this._initHandlers(this, value == "source", value == "target");
|
|
delete this.drag_setter; //prevent double initialization
|
|
}
|
|
return value;
|
|
},
|
|
/*
|
|
s - source html element
|
|
t - target html element
|
|
d - drop-on html element ( can be not equal to the target )
|
|
e - native html event
|
|
*/
|
|
//called when drag moved over possible target
|
|
$dragIn:function(s,t,e){
|
|
var id = this.locate(e) || null;
|
|
var context = webix.DragControl._drag_context;
|
|
|
|
//in inner drag mode - ignore dnd from other components
|
|
if ((this._inner_drag_only || context.from._inner_drag_only) && context.from !== this) return false;
|
|
|
|
var to = webix.DragControl.getMaster(t);
|
|
//previous target
|
|
var html = (this.getItemNode(id, e)||this._dataobj);
|
|
//prevent double processing of same target
|
|
if (html == webix.DragControl._landing) return html;
|
|
context.target = id;
|
|
context.to = to;
|
|
|
|
if (this._auto_scroll_delay)
|
|
this._auto_scroll_delay = window.clearTimeout(this._auto_scroll_delay);
|
|
this._auto_scroll_delay = webix.delay(this._auto_scroll, this, [webix.html.pos(e), id], 250);
|
|
|
|
if (!this.$dropAllow(context, e) ||
|
|
!this.callEvent("onBeforeDragIn",[context, e])){
|
|
context.to = context.target = null;
|
|
return null;
|
|
}
|
|
//mark target only when landing confirmed
|
|
this.$dragMark(context,e);
|
|
return html;
|
|
},
|
|
$dropAllow:function(){
|
|
return true;
|
|
},
|
|
_drag_pause:function(id){
|
|
//may be reimplemented in some components
|
|
// tree for example
|
|
},
|
|
_auto_scroll:function(pos, id){
|
|
var yscroll = 1;
|
|
var xscroll = 0;
|
|
|
|
var scroll = this._settings.dragscroll;
|
|
if (typeof scroll == "string"){
|
|
xscroll = scroll.indexOf("x") != -1;
|
|
yscroll = scroll.indexOf("y") != -1;
|
|
}
|
|
|
|
var data = this._body || this.$view;
|
|
var box = webix.html.offset(data);
|
|
|
|
var top = box.y;
|
|
var bottom = top + data.offsetHeight;
|
|
var left = box.x;
|
|
var right = left + data.offsetWidth;
|
|
|
|
var scroll = this.getScrollState();
|
|
var reset = false;
|
|
var sense = 40; //dnd auto-scroll sensivity
|
|
|
|
var context = webix.DragControl.getContext();
|
|
|
|
//extension point
|
|
this._drag_pause(id);
|
|
|
|
if (yscroll){
|
|
if (pos.y < (top + sense)){
|
|
this.scrollTo(scroll.x, scroll.y-sense*2);
|
|
reset = true;
|
|
} else if (pos.y > bottom - sense){
|
|
this.scrollTo(scroll.x, scroll.y+sense*2);
|
|
reset = true;
|
|
}
|
|
}
|
|
|
|
if (xscroll){
|
|
if (pos.x < (left + sense)){
|
|
this.scrollTo(scroll.x-sense*2, scroll.y);
|
|
reset = true;
|
|
} else if (pos.x > right - sense){
|
|
this.scrollTo(scroll.x+sense*2, scroll.y);
|
|
reset = true;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
if (reset && webix.DragControl._active)
|
|
if (context && context.to === this)
|
|
this._auto_scroll_delay = webix.delay(this._auto_scroll, this, [pos], 100);
|
|
},
|
|
_target_to_id:function(target){
|
|
return target && typeof target === "object" ? target.toString() : target;
|
|
},
|
|
//called when drag moved out from possible target
|
|
$dragOut:function(s,t,n,e){
|
|
var id = (this._viewobj.contains(n) ? this.locate(e): null) || null;
|
|
var context = webix.DragControl._drag_context;
|
|
|
|
//still over previous target
|
|
if ((context.target||"").toString() == (id||"").toString()) return null;
|
|
|
|
if (this._auto_scroll_delay)
|
|
this._auto_scroll_delay = window.clearTimeout(this._auto_scroll_delay);
|
|
|
|
//unmark previous target
|
|
context.target = context.to = null;
|
|
this.callEvent("onDragOut",[context,e]);
|
|
return null;
|
|
},
|
|
//called when drag moved on target and button is released
|
|
$drop:function(s,t,e){
|
|
if (this._auto_scroll_delay)
|
|
this._auto_scroll_delay = window.clearTimeout(this._auto_scroll_delay);
|
|
|
|
var context = webix.DragControl._drag_context;
|
|
//finalize context details
|
|
context.to = this;
|
|
var target = this._target_to_id(context.target);
|
|
|
|
if (this.getBranchIndex){
|
|
if (target){
|
|
context.parent = this.getParentId(target);
|
|
context.index = this.getBranchIndex(target);
|
|
}
|
|
} else
|
|
context.index = target?this.getIndexById(target):this.count();
|
|
|
|
//unmark last target
|
|
this.$dragMark({}, e);
|
|
|
|
if( context.from && context.from != context.to && context.from.callEvent ){
|
|
context.from.callEvent("onBeforeDropOut", [context,e]);
|
|
}
|
|
|
|
if (!this.callEvent("onBeforeDrop",[context,e])) return;
|
|
//moving
|
|
this._context_to_move(context,e);
|
|
|
|
this.callEvent("onAfterDrop",[context,e]);
|
|
},
|
|
_context_to_move:function(context,e){
|
|
webix.assert(context.from, "Unsopported d-n-d combination");
|
|
if (context.from){ //from different component
|
|
var details = { parent: context.parent, mode: context.pos };
|
|
context.from.move(context.source,context.index,context.to, details);
|
|
}
|
|
},
|
|
_getDragItemPos: function(pos,e){
|
|
if (this.getItemNode){
|
|
var id = this.locate(e, true);
|
|
return id?webix.html.offset(this.getItemNode(id)):null;
|
|
}
|
|
},
|
|
//called when drag action started
|
|
$drag:function(s,e){
|
|
var id = this.locate(e, true);
|
|
if (id){
|
|
var list = [id];
|
|
|
|
if (this.getSelectedId && !this._do_not_drag_selection){ //has selection model
|
|
//if dragged item is one of selected - drag all selected
|
|
var selection = this.getSelectedId(true, true);
|
|
|
|
if (selection && selection.length > 1 && webix.PowerArray.find.call(selection,id)!=-1){
|
|
var hash = {};
|
|
var list = [];
|
|
for (var i=0;i<selection.length; i++)
|
|
hash[selection[i]]=true;
|
|
for (var i = 0; i<this.data.order.length; i++){
|
|
var hash_id = this.data.order[i];
|
|
if (hash[hash_id])
|
|
list.push(hash_id);
|
|
}
|
|
}
|
|
}
|
|
//save initial dnd params
|
|
var context = webix.DragControl._drag_context= { source:list, start:id };
|
|
context.fragile = (this.addRowCss && webix.env.touch && ( webix.env.isWebKit || webix.env.isFF ));
|
|
context.from = this;
|
|
|
|
if (this.callEvent("onBeforeDrag",[context,e])){
|
|
if (webix.Touch)
|
|
webix.Touch._start_context = null;
|
|
|
|
//set drag representation
|
|
return context.html||this.$dragHTML(this.getItem(id), e);
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
$dragHTML:function(obj, e){
|
|
return this._toHTML(obj);
|
|
},
|
|
$dragMark:function(context, ev){
|
|
var target = null;
|
|
if (context.target)
|
|
target = this._target_to_id(context.target);
|
|
|
|
//touch webkit will stop touchmove event if source node removed
|
|
//datatable can't repaint rows without repainting
|
|
if (this._marked && this._marked != target){
|
|
if (!context.fragile) this.removeCss(this._marked, "webix_drag_over");
|
|
this._marked = null;
|
|
}
|
|
|
|
if (!this._marked && target){
|
|
this._marked = target;
|
|
if (!context.fragile) this.addCss(target, "webix_drag_over");
|
|
return target;
|
|
}
|
|
|
|
if (context.to){
|
|
return true;
|
|
}else
|
|
return false;
|
|
}
|
|
};
|
|
|
|
|
|
|
|
webix.Group = {
|
|
$init:function(){
|
|
webix.extend(this.data, webix.GroupStore);
|
|
//in case of plain store we need to remove store original dataset
|
|
this.data.attachEvent("onClearAll",webix.bind(function(){
|
|
this.data._not_grouped_order = this.data._not_grouped_pull = null;
|
|
this._group_level_count = 0;
|
|
},this));
|
|
},
|
|
group:function(config){
|
|
this.data.ungroup(true);
|
|
this.data.group(config);
|
|
},
|
|
ungroup:function(skipRender){
|
|
this.data.ungroup(skipRender);
|
|
}
|
|
};
|
|
|
|
webix.GroupMethods = {
|
|
sum:function(property, data){
|
|
data = data || this;
|
|
var summ = 0;
|
|
for (var i = 0; i < data.length; i++)
|
|
summ+=property(data[i])*1;
|
|
|
|
return summ;
|
|
},
|
|
min:function(property, data){
|
|
data = data || this;
|
|
var min = Infinity;
|
|
|
|
for (var i = 0; i < data.length; i++)
|
|
if (property(data[i])*1 < min) min = property(data[i])*1;
|
|
|
|
return min*1;
|
|
},
|
|
max:function(property, data){
|
|
data = data || this;
|
|
var max = -Infinity;
|
|
|
|
for (var i = 0; i < data.length; i++)
|
|
if (property(data[i])*1 > max) max = property(data[i])*1;
|
|
|
|
return max*1;
|
|
},
|
|
count:function(property, data){
|
|
return data.length;
|
|
},
|
|
any:function(property, data){
|
|
return property(data[0]);
|
|
},
|
|
string:function(property, data){
|
|
return property.$name;
|
|
}
|
|
};
|
|
|
|
webix.GroupStore = {
|
|
$init:function(){
|
|
this.attachEvent("onClearAll", this._reset_groups);
|
|
},
|
|
_reset_groups:function(){
|
|
this._not_grouped_order = this._not_grouped_pull = null;
|
|
this._group_level_count = 0;
|
|
},
|
|
ungroup:function(skipRender){
|
|
if (this.getBranchIndex)
|
|
return this._ungroup_tree.apply(this, arguments);
|
|
|
|
if (this._not_grouped_order){
|
|
this.order = this._not_grouped_order;
|
|
this.pull = this._not_grouped_pull;
|
|
this._not_grouped_pull = this._not_grouped_order = null;
|
|
if(!skipRender)
|
|
this.callEvent("onStoreUpdated",[]);
|
|
}
|
|
|
|
},
|
|
_group_processing:function(scheme){
|
|
this.blockEvent();
|
|
this.group(scheme);
|
|
this.unblockEvent();
|
|
},
|
|
_group_prop_accessor:function(val){
|
|
if (typeof val == "function")
|
|
return val;
|
|
var acc = function(obj){ return obj[val]; };
|
|
acc.$name = val;
|
|
return acc;
|
|
},
|
|
group:function(stats){
|
|
if (this.getBranchIndex)
|
|
return this._group_tree.apply(this, arguments);
|
|
|
|
var key = this._group_prop_accessor(stats.by);
|
|
if (!stats.map[key])
|
|
stats.map[key] = [key, this._any];
|
|
|
|
var groups = {};
|
|
var labels = [];
|
|
this.each(function(data){
|
|
var current = key(data);
|
|
if (!groups[current]){
|
|
labels.push({ id:current, $group:true, $row:stats.row });
|
|
groups[current] = webix.toArray();
|
|
}
|
|
groups[current].push(data);
|
|
});
|
|
for (var prop in stats.map){
|
|
var functor = (stats.map[prop][1]||"any");
|
|
var property = this._group_prop_accessor(stats.map[prop][0]);
|
|
if (typeof functor != "function"){
|
|
webix.assert(webix.GroupMethods[functor], "unknown grouping rule: "+functor);
|
|
functor = webix.GroupMethods[functor];
|
|
}
|
|
|
|
for (var i=0; i < labels.length; i++) {
|
|
labels[i][prop]=functor.call(this, property, groups[labels[i].id]);
|
|
}
|
|
}
|
|
|
|
this._not_grouped_order = this.order;
|
|
this._not_grouped_pull = this.pull;
|
|
|
|
this.order = webix.toArray();
|
|
this.pull = {};
|
|
for (var i=0; i < labels.length; i++){
|
|
var id = this.id(labels[i]);
|
|
this.pull[id] = labels[i];
|
|
this.order.push(id);
|
|
}
|
|
|
|
this.callEvent("onStoreUpdated",[]);
|
|
},
|
|
_group_tree:function(input, parent){
|
|
this._group_level_count = (this._group_level_count||0) + 1;
|
|
|
|
//supports simplified group by syntax
|
|
var stats;
|
|
if (typeof input == "string"){
|
|
stats = { by:this._group_prop_accessor(input), map:{} };
|
|
stats.map[input] = [input];
|
|
} else if (typeof input == "function"){
|
|
stats = { by:input, map:{} };
|
|
} else
|
|
stats = input;
|
|
|
|
//prepare
|
|
var level;
|
|
if (parent)
|
|
level = this.getItem(parent).$level;
|
|
else {
|
|
parent = 0;
|
|
level = 0;
|
|
}
|
|
|
|
var order = this.branch[parent];
|
|
var key = this._group_prop_accessor(stats.by);
|
|
|
|
//run
|
|
var topbranch = [];
|
|
var labels = [];
|
|
for (var i=0; i<order.length; i++){
|
|
var data = this.getItem(order[i]);
|
|
var current = key(data);
|
|
var current_id = level+"$"+current;
|
|
var ancestor = this.branch[current_id];
|
|
|
|
if (!ancestor){
|
|
var newitem = this.pull[current_id] = { id:current_id, value:current, $group:true, $row:stats.row};
|
|
labels.push(newitem);
|
|
ancestor = this.branch[current_id] = [];
|
|
ancestor._formath = [];
|
|
topbranch.push(current_id);
|
|
}
|
|
ancestor.push(data.id);
|
|
ancestor._formath.push(data);
|
|
}
|
|
|
|
this.branch[parent] = topbranch;
|
|
for (var prop in stats.map){
|
|
var functor = (stats.map[prop][1]||"any");
|
|
var property = this._group_prop_accessor(stats.map[prop][0]);
|
|
if (typeof functor != "function"){
|
|
webix.assert(webix.GroupMethods[functor], "unknown grouping rule: "+functor);
|
|
functor = webix.GroupMethods[functor];
|
|
}
|
|
|
|
for (var i=0; i < labels.length; i++)
|
|
labels[i][prop]=functor.call(this, property, this.branch[labels[i].id]._formath);
|
|
}
|
|
|
|
for (var i=0; i < labels.length; i++){
|
|
var group = labels[i];
|
|
|
|
if (this.hasEvent("onGroupCreated"))
|
|
this.callEvent("onGroupCreated", [group.id, group.value, this.branch[group.id]._formath]);
|
|
|
|
if (stats.footer){
|
|
var id = "footer$"+group.id;
|
|
var footer = this.pull[id] = { id:id, $footer:true, value: group.value, $level:level, $count:0, $parent:group.id, $row:stats.footer.row};
|
|
for (var prop in stats.footer){
|
|
var functor = (stats.footer[prop][1]||"any");
|
|
var property = this._group_prop_accessor(stats.footer[prop][0]);
|
|
if (typeof functor != "function"){
|
|
webix.assert(webix.GroupMethods[functor], "unknown grouping rule: "+functor);
|
|
functor = webix.GroupMethods[functor];
|
|
}
|
|
|
|
footer[prop]=functor.call(this, property, this.branch[labels[i].id]._formath);
|
|
}
|
|
|
|
this.branch[group.id].push(footer.id);
|
|
this.callEvent("onGroupFooter", [footer.id, footer.value, this.branch[group.id]._formath]);
|
|
}
|
|
|
|
delete this.branch[group.id]._formath;
|
|
}
|
|
|
|
|
|
this._fix_group_levels(topbranch, parent, level+1);
|
|
|
|
this.callEvent("onStoreUpdated",[]);
|
|
},
|
|
_ungroup_tree:function(skipRender, parent, force){
|
|
//not grouped
|
|
if (!force && !this._group_level_count) return;
|
|
this._group_level_count = Math.max(0, this._group_level_count -1 );
|
|
|
|
parent = parent || 0;
|
|
var order = [];
|
|
var toporder = this.branch[parent];
|
|
for (var i=0; i<toporder.length; i++){
|
|
var id = toporder[i];
|
|
var branch = this.branch[id];
|
|
if (branch)
|
|
order = order.concat(branch);
|
|
|
|
delete this.pull[id];
|
|
delete this.branch[id];
|
|
}
|
|
|
|
this.branch[parent] = order;
|
|
for (var i = order.length - 1; i >= 0; i--) {
|
|
if (this.pull[order[i]].$footer)
|
|
order.splice(i,1);
|
|
}
|
|
this._fix_group_levels(order, 0, 1);
|
|
|
|
if (!skipRender)
|
|
this.callEvent("onStoreUpdated",[]);
|
|
},
|
|
_fix_group_levels:function(branch, parent, level){
|
|
if (parent)
|
|
this.getItem(parent).$count = branch.length;
|
|
|
|
for (var i = 0; i < branch.length; i++) {
|
|
var item = this.pull[branch[i]];
|
|
item.$level = level;
|
|
item.$parent = parent;
|
|
var next = this.branch[item.id];
|
|
if (next)
|
|
this._fix_group_levels(next, item.id, level+1);
|
|
}
|
|
}
|
|
};
|
|
webix.clipbuffer = {
|
|
|
|
_area: null,
|
|
_blur_id: null,
|
|
_ctrl: 0,
|
|
|
|
/*! create textarea or returns existing
|
|
**/
|
|
init: function() {
|
|
// returns existing textarea
|
|
if (this._area !== null)
|
|
return this._area;
|
|
|
|
webix.destructors.push(this);
|
|
// creates new textarea
|
|
this._area = document.createElement('textarea');
|
|
this._area.className = "webix_clipbuffer";
|
|
this._area.setAttribute("webixignore", 1);
|
|
document.body.appendChild(this._area);
|
|
|
|
webix.event(document.body, 'keydown', webix.bind(function(e){
|
|
var key = e.keyCode;
|
|
var ctrl = !!(e.ctrlKey || e.metaKey);
|
|
if (key === 86 && ctrl)
|
|
webix.delay(this._paste, this, [e], 100);
|
|
}, this));
|
|
|
|
return this._area;
|
|
},
|
|
destructor: function(){
|
|
this._area = null;
|
|
},
|
|
/*! set text into buffer
|
|
**/
|
|
set: function(text) {
|
|
this.init();
|
|
this._area.value = text;
|
|
this.focus();
|
|
},
|
|
/*! select text in textarea
|
|
**/
|
|
focus: function() {
|
|
// if there is native browser selection, skip focus
|
|
if(!this._isSelectRange()){
|
|
this.init();
|
|
this._area.focus();
|
|
this._area.select();
|
|
}
|
|
|
|
},
|
|
/*! checks document selection
|
|
**/
|
|
_isSelectRange: function() {
|
|
var text = "";
|
|
if (typeof window.getSelection != "undefined") {
|
|
text = window.getSelection().toString();
|
|
} else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
|
|
text = document.selection.createRange().text;
|
|
}
|
|
return !!text;
|
|
},
|
|
/*! process ctrl+V pressing
|
|
**/
|
|
_paste: function(e) {
|
|
var trg = e.target || e.srcElement;
|
|
if (trg === this._area) {
|
|
var text = this._area.value;
|
|
var last_active = webix.UIManager.getFocus();
|
|
if (last_active && (!last_active.getEditor || !last_active.getEditor())){
|
|
last_active.callEvent("onPaste", [text]);
|
|
this._area.select();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
webix.CopyPaste = {
|
|
clipboard_setter: function(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);
|
|
webix.clipbuffer.set(text, this);
|
|
webix.clipbuffer.focus();
|
|
}
|
|
});
|
|
this.attachEvent("onPaste", function(text) {
|
|
if (!webix.isUndefined(this._paste[this._settings.clipboard]))
|
|
this._paste[this._settings.clipboard].call(this, text);
|
|
});
|
|
this.attachEvent("onFocus", function() {
|
|
webix.clipbuffer.focus();
|
|
});
|
|
// solution for clicks on selected items
|
|
this.attachEvent("onItemClick",function(){
|
|
if(!document.activeElement || !this.$view.contains(document.activeElement)){
|
|
webix.clipbuffer.focus();
|
|
webix.UIManager.setFocus(this);
|
|
}
|
|
|
|
});
|
|
return value;
|
|
},
|
|
_paste: {
|
|
// insert new item with pasted value
|
|
insert: function(text) {
|
|
this.add({ value: text });
|
|
},
|
|
// 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;
|
|
this.refresh(sel[i]);
|
|
}
|
|
},
|
|
// do nothing
|
|
custom: function(text) {}
|
|
},
|
|
templateCopy_setter: function(value) {
|
|
this.type.templateCopy = webix.template(value);
|
|
},
|
|
type:{
|
|
templateCopy: function(item) {
|
|
return this.template(item);
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
webix.KeysNavigation = {
|
|
_navigation_helper:function(mode){
|
|
return function(view, e){
|
|
var tag = (e.srcElement || e.target);
|
|
|
|
//ignore clipboard listener
|
|
if (!tag.getAttribute("webixignore")){
|
|
//ignore hotkeys if focus in the common input
|
|
//to allow normal text edit operations
|
|
var name = tag.tagName;
|
|
if (name == "INPUT" || name == "TEXTAREA" || name == "SELECT") return true;
|
|
}
|
|
|
|
if (view && view.moveSelection && view.config.navigation && !view._in_edit_mode)
|
|
return view.moveSelection(mode, e.shiftKey);
|
|
return true;
|
|
};
|
|
},
|
|
moveSelection:function(mode, shift){
|
|
//get existing selection
|
|
var selected = this.getSelectedId(true);
|
|
var target = null;
|
|
|
|
if (!selected.length){
|
|
if (mode == "down") mode = "top";
|
|
else if (mode == "up") mode = "bottom";
|
|
else return;
|
|
selected = [1];
|
|
}
|
|
|
|
if (selected.length == 1){ //if we have a selection
|
|
selected = selected[0];
|
|
|
|
if (mode == "left" && this.close)
|
|
return this.close(selected);
|
|
if (mode == "right" && this.open)
|
|
return this.open(selected);
|
|
else if (mode == "top") {
|
|
selected = this.getFirstId();
|
|
} else if (mode == "bottom") {
|
|
selected = this.getLastId();
|
|
} else if (mode == "up" || mode == "left" || mode == "pgup") {
|
|
var index = this.getIndexById(selected);
|
|
var step = mode == "pgup" ? 10 : 1;
|
|
selected = this.getIdByIndex(Math.max(0, index-step));
|
|
} else if (mode == "down" || mode == "right" || mode == "pgdown") {
|
|
var index = this.getIndexById(selected);
|
|
var step = mode == "pgdown" ? 10 : 1;
|
|
selected = this.getIdByIndex(Math.min(this.count()-1, index+step));
|
|
} else {
|
|
webix.assert(false, "Not supported selection moving mode");
|
|
return;
|
|
}
|
|
this.showItem(selected);
|
|
this.select(selected);
|
|
}
|
|
return false;
|
|
},
|
|
navigation_setter:function(value){
|
|
//using global flag to apply hotkey only once
|
|
if (value && !webix.UIManager._global_nav_grid_hotkeys){
|
|
webix.UIManager._global_nav_grid_hotkeys = true;
|
|
//hotkeys will react on any component but will not work in edit mode
|
|
//you can define moveSelection method to handle navigation keys
|
|
webix.UIManager.addHotKey("up", this._navigation_helper("up"));
|
|
webix.UIManager.addHotKey("down", this._navigation_helper("down"));
|
|
webix.UIManager.addHotKey("shift+up", this._navigation_helper("up"));
|
|
webix.UIManager.addHotKey("shift+down", this._navigation_helper("down"));
|
|
webix.UIManager.addHotKey("shift+right", this._navigation_helper("right"));
|
|
webix.UIManager.addHotKey("shift+left", this._navigation_helper("left"));
|
|
webix.UIManager.addHotKey("pageup", this._navigation_helper("pgup"));
|
|
webix.UIManager.addHotKey("pagedown", this._navigation_helper("pgdown"));
|
|
webix.UIManager.addHotKey("home", this._navigation_helper("top"));
|
|
webix.UIManager.addHotKey("end", this._navigation_helper("bottom"));
|
|
webix.UIManager.addHotKey("right", this._navigation_helper("right"));
|
|
webix.UIManager.addHotKey("left", this._navigation_helper("left"));
|
|
|
|
}
|
|
|
|
return value;
|
|
}
|
|
};
|
|
|
|
|
|
|
|
webix.protoUI({
|
|
name:"tree",
|
|
defaults:{
|
|
scroll:"a"
|
|
},
|
|
$init:function(){
|
|
this._viewobj.className += " webix_tree";
|
|
|
|
//map API of DataStore on self
|
|
webix.extend(this.data, webix.TreeStore, true);
|
|
webix.extend(this.on_click, webix.TreeClick);
|
|
this.attachEvent("onAfterRender", this._refresh_scroll);
|
|
this.attachEvent("onPartialRender", this._refresh_scroll);
|
|
this.data.provideApi(this,true);
|
|
},
|
|
//attribute , which will be used for ID storing
|
|
_id:"webix_tm_id",
|
|
//supports custom context menu
|
|
on_context:{},
|
|
on_dblclick:{
|
|
webix_tree_checkbox:function(){
|
|
if(this.on_click.webix_tree_checkbox)
|
|
return this.on_click.webix_tree_checkbox.apply(this,arguments);
|
|
}
|
|
},
|
|
//css class to action map, for onclick event
|
|
on_click:{
|
|
webix_tree_item:function(e,id){
|
|
if(this._settings.activeTitle){
|
|
var item = this.getItem(id);
|
|
if(item.open)
|
|
this.close(id);
|
|
else
|
|
this.open(id);
|
|
}
|
|
if (this._settings.select){
|
|
if (this._settings.select=="multiselect" || this._settings.multiselect){
|
|
if (this._settings.multiselect == "level"){
|
|
//allow only selection on the same level
|
|
var select = this.getSelectedId(true)[0];
|
|
if (select && this.getParentId(id) != this.getParentId(select))
|
|
return;
|
|
}
|
|
this.select(id, false, (e.ctrlKey || e.metaKey || (this._settings.multiselect == "touch")), e.shiftKey); //multiselection
|
|
} else
|
|
this.select(id);
|
|
}
|
|
}
|
|
},
|
|
_paste: {
|
|
// insert new item with pasted value
|
|
insert: function(text) {
|
|
var parent = this.getSelectedId() ||'0' ;
|
|
this.add({ value: text }, null, parent);
|
|
},
|
|
// 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;
|
|
this.refresh(sel[i]);
|
|
}
|
|
},
|
|
// do nothing
|
|
custom: function(text) {}
|
|
},
|
|
_drag_order_complex:true,
|
|
$dragHTML:function(obj){
|
|
return "<div class='borderless'>"+this.type.template(obj, this.type)+"</div>";
|
|
},
|
|
|
|
//css class to action map, for dblclick event
|
|
type:webix.extend({
|
|
//normal state of item
|
|
template:function(obj,common){
|
|
var template = common["template"+obj.level]||common.templateCommon;
|
|
return template.apply(this, arguments);
|
|
},
|
|
classname:function(obj, common, marks){
|
|
var css = "webix_tree_item";
|
|
|
|
if (obj.$css){
|
|
if (typeof obj.$css == "object")
|
|
obj.$css = webix.html.createCss(obj.$css);
|
|
css += " "+obj.$css;
|
|
}
|
|
if (marks && marks.$css)
|
|
css += " "+marks.$css;
|
|
|
|
return css;
|
|
},
|
|
templateCommon:webix.template("{common.icon()} {common.folder()} <span>#value#</span>"),
|
|
templateStart:webix.template('<div webix_tm_id="#id#" class="{common.classname()}">'),
|
|
templateEnd:webix.template("</div>"),
|
|
templateCopy: webix.template("#value#")
|
|
}, webix.TreeType)
|
|
}, webix.AutoTooltip, webix.Group, webix.TreeAPI, webix.DragItem, webix.TreeDataMove, webix.SelectionModel, webix.KeysNavigation, webix.MouseEvents, webix.Scrollable, webix.TreeDataLoader, webix.ui.proto, webix.TreeRenderStack, webix.CopyPaste, webix.EventSystem);
|
|
|
|
webix.TreeStateCheckbox = {
|
|
_init_render_tree_state: function(){
|
|
if (this._branch_render_supported){
|
|
var old_render = this.render;
|
|
this.render = function(id,data,mode){
|
|
var updated = old_render.apply(this,arguments);
|
|
|
|
if(this._settings.threeState && updated && data != "checkbox")
|
|
this._setThirdState.apply(this,arguments);
|
|
};
|
|
this._init_render_tree_state=function(){};
|
|
}
|
|
},
|
|
threeState_setter:function(value){
|
|
if (value)
|
|
this._init_render_tree_state();
|
|
return value;
|
|
},
|
|
_setThirdState:function(id){
|
|
var i,leaves,parents,checkedParents,tree;
|
|
parents = [];
|
|
tree = this;
|
|
|
|
/*if item was removed*/
|
|
if(id&&!tree.data.pull[id]){
|
|
id = 0;
|
|
}
|
|
/*sets checkbox states*/
|
|
/*if branch or full reloading*/
|
|
if(!id||tree.data.pull[id].$count){
|
|
leaves = this._getAllLeaves(id);
|
|
leaves.sort(function(a,b){
|
|
return tree.data.pull[b].$level - tree.data.pull[a].$level;
|
|
});
|
|
for(i=0;i < leaves.length;i++){
|
|
if(!i||tree.data.pull[leaves[i]].$parent!=tree.data.pull[leaves[i-1]].$parent)
|
|
parents = parents.concat(tree._setParentThirdState(leaves[i]));
|
|
}
|
|
}
|
|
else{
|
|
/*an item is a leaf */
|
|
parents = parents.concat(tree._setParentThirdState(id));
|
|
}
|
|
|
|
checkedParents = {};
|
|
for(i=0;i<parents.length;i++){
|
|
if(!checkedParents[parents[i]]){
|
|
checkedParents[parents[i]] = 1;
|
|
this._setCheckboxIndeterminate(parents[i]);
|
|
}
|
|
}
|
|
|
|
tree = null;
|
|
},
|
|
_setCheckboxIndeterminate:function(id){
|
|
var chElem, elem;
|
|
elem = this.getItemNode(id);
|
|
if(elem){
|
|
this.render(id,"checkbox","update");
|
|
/*needed to get the new input obj and to set indeterminate state*/
|
|
if(this.getItem(id).indeterminate){
|
|
elem = this.getItemNode(id);
|
|
chElem = elem.getElementsByTagName("input")[0];
|
|
if(chElem)
|
|
chElem.indeterminate = this.getItem(id).indeterminate;
|
|
}
|
|
}
|
|
},
|
|
_setParentThirdState:function(itemId){
|
|
//we need to use dynamic function creating
|
|
//jshint -W083:true
|
|
|
|
var checked, checkedCount,indeterminate, parentId,result,tree,unsureCount,needrender;
|
|
parentId = this.getParentId(itemId);
|
|
tree = this;
|
|
result = [];
|
|
while(parentId && parentId != "0"){
|
|
unsureCount = 0;
|
|
checkedCount = 0;
|
|
this.data.eachChild(parentId,function(obj){
|
|
if(obj.indeterminate){
|
|
unsureCount++;
|
|
}
|
|
else if(obj.checked){
|
|
checkedCount++;
|
|
}
|
|
});
|
|
|
|
checked = indeterminate = needrender = false;
|
|
|
|
var item = this.getItem(parentId);
|
|
if(checkedCount==item.$count){
|
|
checked = true;
|
|
}
|
|
else if(checkedCount>0||unsureCount>0){
|
|
indeterminate = true;
|
|
}
|
|
|
|
|
|
//we need to reset indeterminate in any case :(
|
|
if (indeterminate || indeterminate != item.indeterminate)
|
|
needrender = true;
|
|
item.indeterminate = indeterminate;
|
|
if (item.checked != checked)
|
|
needrender = true;
|
|
item.checked = checked;
|
|
|
|
if (needrender){
|
|
result.push(parentId);
|
|
parentId = this.getParentId(parentId);
|
|
} else
|
|
parentId = 0;
|
|
|
|
|
|
|
|
}
|
|
return result;
|
|
},
|
|
/*get all checked items in tree*/
|
|
getChecked:function(){
|
|
var result=[];
|
|
var tree = this;
|
|
this.data.eachSubItem(0,function(obj){
|
|
if (tree.isChecked(obj.id))
|
|
result.push(obj.id);
|
|
});
|
|
return result;
|
|
},
|
|
_tree_check_uncheck_3:function(id, mode){
|
|
var item = this.getItem(id);
|
|
if(item){
|
|
if (mode === "")
|
|
mode = !item.checked;
|
|
if(item.checked != mode || item.indeterminate){
|
|
item.checked = mode;
|
|
this._correctThreeState(id);
|
|
var parents = this._setParentThirdState(id);
|
|
if (this._branch_render_supported && parents.length < 5){
|
|
for (var i=0; i<parents.length; i++)
|
|
this._setCheckboxIndeterminate(parents[i]);
|
|
} else
|
|
this.refresh();
|
|
this.callEvent("onItemCheck", [id, mode]);
|
|
}
|
|
}
|
|
},
|
|
/*set checked state for item checkbox*/
|
|
checkItem:function(id){
|
|
this._tree_check_uncheck(id, true);
|
|
this.updateItem(id);
|
|
},
|
|
/*uncheckes an item checkbox*/
|
|
uncheckItem:function(id){
|
|
this._tree_check_uncheck(id, false);
|
|
this.updateItem(id);
|
|
},
|
|
_checkUncheckAll: function(id,mode,all){
|
|
var method = mode?"checkItem":"uncheckItem";
|
|
if(!id)
|
|
id = 0;
|
|
else
|
|
this[method](id);
|
|
if(this._settings.threeState){
|
|
if(!id)
|
|
this.data.eachChild(0,function(item){
|
|
this[method](item.id);
|
|
},this,all);
|
|
}
|
|
else
|
|
this.data.each(function(item){
|
|
this[method](item.id);
|
|
},this,all,id);
|
|
|
|
},
|
|
/*checkes checkboxes of all items in a branch/tree*/
|
|
checkAll: function(id, all){
|
|
this._checkUncheckAll(id,true,all);
|
|
|
|
},
|
|
/*uncheckes checkboxes of all items in a branch/tree*/
|
|
uncheckAll: function(id, all){
|
|
this._checkUncheckAll(id,false,all);
|
|
},
|
|
_correctThreeState:function(id){
|
|
var i,leaves,state;
|
|
var item = this.getItem(id);
|
|
|
|
item.indeterminate = false;
|
|
state = item.checked;
|
|
|
|
this.data.eachSubItem(id, function(child){
|
|
child.indeterminate = false;
|
|
child.checked = state;
|
|
});
|
|
|
|
if(this._branch_render_supported && this.isBranchOpen(item.$parent)){ //for tree-render only
|
|
this.render(id,0,"branch");
|
|
}
|
|
},
|
|
/*returns checked state of item checkbox*/
|
|
isChecked:function(id){
|
|
return this.getItem(id).checked;
|
|
},
|
|
/*gets all leaves in a certain branch (in the whole tree if id is not set)*/
|
|
_getAllLeaves:function(parentId){
|
|
var result = [];
|
|
this.data.eachSubItem(parentId, function(obj, branch){
|
|
if (!branch)
|
|
result.push(obj.id);
|
|
});
|
|
return result;
|
|
}
|
|
};
|
|
|
|
if (webix.ui.tree)
|
|
webix.extend(webix.ui.tree, webix.TreeStateCheckbox, true);
|
|
webix.type(webix.ui.tree, {
|
|
name:"lineTree",
|
|
css:"webixLineTree",
|
|
icon:function(obj, common){
|
|
var html = "";
|
|
var open = "";
|
|
for (var i=1; i<=obj.$level; i++){
|
|
if (i==obj.$level)
|
|
var open = (obj.$count?(obj.open?'webix_tree_open ':'webix_tree_close '):'webix_tree_none ');
|
|
|
|
var icon = this._icon_src(obj, common, i);
|
|
if (icon)
|
|
html+="<div class='"+open+" webix_tree_img webix_tree_"+icon+"'></div>";
|
|
}
|
|
return html;
|
|
},
|
|
_icon_src:function(obj, common, level){
|
|
var lines = common._tree_branch_render_state;
|
|
var tree = webix.TreeRenderStack._obj;
|
|
if (lines === 0 && tree){
|
|
//we are in standalone rendering
|
|
//need to reconstruct rendering state
|
|
var lines_level = obj.$level;
|
|
var branch_id = obj.id;
|
|
|
|
lines = [];
|
|
while (lines_level){
|
|
var parent_id = tree.getParentId(branch_id);
|
|
var pbranch = tree.data.branch[parent_id];
|
|
if (pbranch[pbranch.length-1] == branch_id)
|
|
lines[lines_level] = true;
|
|
|
|
branch_id = parent_id;
|
|
lines_level--;
|
|
}
|
|
|
|
//store for next round
|
|
common._tree_branch_render_state = lines;
|
|
}
|
|
if (!lines)
|
|
return 0;
|
|
//need to be replaced with image urls
|
|
if (level == obj.$level){
|
|
var mode = 3; //3-way line
|
|
if (!obj.$parent){ //top level
|
|
if (obj.$index === 0)
|
|
mode = 4; //firts top item
|
|
}
|
|
if (lines[obj.$level])
|
|
mode = 2;
|
|
|
|
if (obj.$count){
|
|
if (obj.open)
|
|
return "minus"+mode;
|
|
else
|
|
return "plus"+mode;
|
|
} else
|
|
return "line"+mode;
|
|
} else {
|
|
if (!lines[level])
|
|
return "line1";
|
|
return "blank";
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
UI: navigation control
|
|
*/
|
|
webix.NavigationButtons = {
|
|
_renderPanel:function(){
|
|
webix.html.remove(this._navPanel);
|
|
|
|
|
|
this._navPanel = webix.html.create("DIV",{
|
|
"class":"webix_nav_panel "+"webix_nav_panel_"+this._settings.navigation.type
|
|
},"");
|
|
|
|
this._viewobj.appendChild(this._navPanel);
|
|
|
|
|
|
this._renderNavItems();
|
|
this._renderNavButtons();
|
|
this._setLinkEventHandler();
|
|
},
|
|
_setLinkEventHandler: function(){
|
|
var h = [];
|
|
if(this._navPanel)
|
|
h[0] = webix.event(this._navPanel,"click", webix.bind(function(e){
|
|
var elem = (e.srcElement || e.target);
|
|
var found = false;
|
|
while(elem != this._navPanel && !found){
|
|
var bindId = elem.getAttribute(this._linkAttr);
|
|
if(bindId){
|
|
found = true;
|
|
this._showPanelBind(bindId);
|
|
}
|
|
elem = elem.parentNode;
|
|
}
|
|
},this));
|
|
if(this._prevNavButton)
|
|
h[1] = webix.event(this._prevNavButton,"click", webix.bind(function(e){
|
|
this._showNavItem(-1);
|
|
},this));
|
|
if(this._nextNavButton)
|
|
h[1] = webix.event(this._nextNavButton,"click", webix.bind(function(e){
|
|
this._showNavItem(1);
|
|
},this));
|
|
this.attachEvent("onDestruct", function(){
|
|
for(var i=0;i< h.length; i++){
|
|
this.detachEvent(h[i]);
|
|
}
|
|
h = null;
|
|
});
|
|
},
|
|
_showNavItem: function(inc){
|
|
if(this._cells){
|
|
var index = this._active_cell + inc;
|
|
if(index >= this._cells.length || index < 0){
|
|
index = (index < 0?this._cells.length-1:0);
|
|
}
|
|
this.setActiveIndex(index);
|
|
}
|
|
},
|
|
_showPanelBind: function(id){
|
|
if(this._cells)
|
|
webix.$$(id).show();
|
|
},
|
|
_renderNavItems:function(){
|
|
var item, config;
|
|
config = this._settings.navigation;
|
|
if(config.items){
|
|
this._linkAttr = config.linkAttr || "bind_id";
|
|
|
|
if(!this._navPanel)
|
|
this._renderPanel();
|
|
else
|
|
this._clearPanel();
|
|
|
|
var data = (this._cells?this._cells:this.data.order);
|
|
if(data.length>1){
|
|
for (var i=0; i < data.length; i++){
|
|
|
|
item = webix.html.create("DIV",{
|
|
"class":"webix_nav_item webix_nav_"+(i==this._active_cell?"active":"inactive")
|
|
},"<div></div>");
|
|
var id = this._cells?this._cells[i]._settings.id:data[i];
|
|
if(id)
|
|
item.setAttribute(this._linkAttr, id);
|
|
this._navPanel.appendChild(item);
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
},
|
|
_clearPanel:function(){
|
|
if (this._navPanel){
|
|
var coll = this._navPanel.childNodes;
|
|
for (var i = coll.length - 1; i >= 0; i--)
|
|
webix.html.remove(coll[i]);
|
|
}
|
|
},
|
|
_renderNavButtons: function(){
|
|
var item, config;
|
|
config = this._settings.navigation;
|
|
if(config.buttons){
|
|
|
|
if(this._prevNavButton)
|
|
webix.html.remove(this._prevNavButton);
|
|
if(this._prevNavButton)
|
|
webix.html.remove(this._nextNavButton);
|
|
|
|
|
|
this._prevNavButton = webix.html.create(
|
|
"DIV",
|
|
{
|
|
"class":"webix_nav_button_"+config.type+" webix_nav_button_prev "
|
|
},
|
|
"<div class=\"webix_nav_button_inner\"></div>"
|
|
);
|
|
this._viewobj.appendChild(this._prevNavButton);
|
|
|
|
this._nextNavButton = webix.html.create(
|
|
"DIV",
|
|
{
|
|
"class":"webix_nav_button_"+config.type+" webix_nav_button_next "
|
|
},
|
|
"<div class=\"webix_nav_button_inner\"></div>"
|
|
);
|
|
this._viewobj.appendChild(this._nextNavButton);
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
webix.protoUI({
|
|
name:"list",
|
|
_listClassName : "webix_list",
|
|
$init:function(config){
|
|
webix.html.addCss(this._viewobj, this._listClassName + (((config.layout||this.defaults.layout) == "x")?"-x":"") );
|
|
this.data.provideApi(this,true);
|
|
|
|
this._auto_resize = webix.bind(this._auto_resize, this);
|
|
this.data.attachEvent("onStoreUpdated", this._auto_resize);
|
|
this.data.attachEvent("onSyncApply", this._auto_resize);
|
|
this.attachEvent("onAfterRender", this._correct_width_scroll);
|
|
},
|
|
$dragHTML:function(obj, e){
|
|
if (this._settings.layout == "y" && this.type.width == "auto"){
|
|
this.type.width = this._content_width;
|
|
var node = this._toHTML(obj);
|
|
this.type.width = "auto";
|
|
return node;
|
|
}
|
|
return this._toHTML(obj);
|
|
},
|
|
defaults:{
|
|
select:false,
|
|
scroll:true,
|
|
layout:"y"
|
|
},
|
|
_id:"webix_l_id",
|
|
on_click:{
|
|
webix_list_item:function(e,id){
|
|
if (this._settings.select){
|
|
this._no_animation = true;
|
|
if (this._settings.select=="multiselect" || this._settings.multiselect)
|
|
this.select(id, false, (e.ctrlKey || e.metaKey || (this._settings.multiselect == "touch")), e.shiftKey); //multiselection
|
|
else
|
|
this.select(id);
|
|
this._no_animation = false;
|
|
}
|
|
}
|
|
},
|
|
on_dblclick:{
|
|
},
|
|
getVisibleCount:function(){
|
|
return Math.floor(this._content_height / this.type.height);
|
|
},
|
|
_auto_resize:function(){
|
|
if (this._settings.autoheight || this._settings.autowidth)
|
|
this.resize();
|
|
},
|
|
_auto_height_calc:function(count){
|
|
var value = this.data.$pagesize||this.count();
|
|
|
|
this._onoff_scroll(count && count < value);
|
|
if (this._settings.autoheight && value < (count||Infinity) )
|
|
count = value;
|
|
return Math.max(this.type.height * count,this._settings.minHeight||0);
|
|
},
|
|
_auto_width_calc:function(count){
|
|
var value = this.data.$pagesize||this.count();
|
|
|
|
this._onoff_scroll(count && count < value);
|
|
if (this._settings.autowidth && value < (count||Infinity) )
|
|
count = value;
|
|
|
|
return (this.type.width * count);
|
|
},
|
|
_correct_width_scroll:function(){
|
|
if (this._settings.layout == "x")
|
|
this._dataobj.style.width = (this.type.width != "auto") ? (this.type.width * this.count() + "px") : "auto";
|
|
},
|
|
$getSize:function(dx,dy){
|
|
if (this._settings.layout == "y"){
|
|
if (this.type.width!="auto")
|
|
this._settings.width = this.type.width + (this._scroll_y?webix.ui.scrollSize:0);
|
|
if (this._settings.yCount || this._settings.autoheight)
|
|
this._settings.height = this._auto_height_calc(this._settings.yCount)||1;
|
|
}
|
|
else {
|
|
if (this.type.height!="auto")
|
|
this._settings.height = this.type.height + (this._scroll_x?webix.ui.scrollSize:0);
|
|
if (this._settings.xCount || this._settings.autowidth)
|
|
this._settings.width = this._auto_width_calc(this._settings.xCount)||1;
|
|
}
|
|
return webix.ui.view.prototype.$getSize.call(this, dx, dy);
|
|
},
|
|
$setSize:function(){
|
|
webix.ui.view.prototype.$setSize.apply(this, arguments);
|
|
},
|
|
type:{
|
|
css:"",
|
|
widthSize:function(obj, common){
|
|
return common.width+(common.width>-1?"px":"");
|
|
},
|
|
heightSize:function(obj, common){
|
|
return common.height+(common.height>-1?"px":"");
|
|
},
|
|
classname:function(obj, common, marks){
|
|
var css = "webix_list_item";
|
|
if (obj.$css){
|
|
if (typeof obj.$css == "object")
|
|
obj.$css = webix.html.createCss(obj.$css);
|
|
css += " "+obj.$css;
|
|
}
|
|
if (marks && marks.$css)
|
|
css += " "+marks.$css;
|
|
|
|
return css;
|
|
},
|
|
template:function(obj){
|
|
return (obj.icon?("<span class='webix_icon fa-"+obj.icon+"'></span> "):"") + obj.value + (obj.badge?("<div class='webix_badge'>"+obj.badge+"</div>"):"");
|
|
},
|
|
width:"auto",
|
|
templateStart:webix.template('<div webix_l_id="#id#" class="{common.classname()}" style="width:{common.widthSize()}; height:{common.heightSize()}; overflow:hidden;">'),
|
|
templateEnd:webix.template("</div>")
|
|
},
|
|
$skin:function(){
|
|
this.type.height = webix.skin.$active.listItemHeight;
|
|
}
|
|
}, webix.KeysNavigation, webix.DataMove, webix.DragItem, webix.MouseEvents, webix.SelectionModel, webix.Scrollable, webix.ui.proto, webix.CopyPaste);
|
|
|
|
webix.protoUI({
|
|
name:"grouplist",
|
|
defaults:{
|
|
animate:{
|
|
}
|
|
},
|
|
_listClassName : "webix_grouplist",
|
|
$init:function(){
|
|
webix.extend(this.data, webix.TreeStore, true);
|
|
//needed for getRange
|
|
this.data.count = function(){ return this.order.length; };
|
|
this.data.provideApi(this,true);
|
|
this.data.attachEvent("onClearAll", webix.bind(this._onClear, this));
|
|
this._onClear();
|
|
},
|
|
_onClear:function(){
|
|
this._nested_cursor = [];
|
|
this._nested_chain = [];
|
|
},
|
|
$setSize:function(){
|
|
if (webix.ui.view.prototype.$setSize.apply(this, arguments)){
|
|
//critical for animations in group list
|
|
this._dataobj.style.width = this._content_width;
|
|
}
|
|
},
|
|
on_click:{
|
|
webix_list_item:function(e,id){
|
|
if (this._in_animation) {
|
|
return false;
|
|
}
|
|
|
|
for (var i=0; i < this._nested_chain.length; i++){
|
|
if (this._nested_chain[i] == id){ //one level up
|
|
for (var j=i; j < this._nested_chain.length; j++) {
|
|
this.data.getItem(this._nested_chain[j]).$template="";
|
|
}
|
|
if (!i){ //top level
|
|
this._nested_cursor = this.data.branch[0];
|
|
this._nested_chain = [];
|
|
} else {
|
|
this._nested_cursor= this.data.branch[this._nested_chain[i-1]];
|
|
this._nested_chain.splice(i);
|
|
}
|
|
this._is_level_down = false;
|
|
return this.render();
|
|
}
|
|
}
|
|
|
|
var obj = this.getItem(id);
|
|
if (obj.$count){ //one level down
|
|
this._is_level_down = true;
|
|
this._nested_chain.push(id);
|
|
obj.$template = "Back";
|
|
this._nested_cursor = this.data.branch[obj.id];
|
|
return this.render();
|
|
} else {
|
|
if (this._settings.select){
|
|
this._no_animation = true;
|
|
if (this._settings.select=="multiselect" || this._settings.multiselect)
|
|
this.select(id, false, ((this._settings.multiselect == "touch") || e.ctrlKey || e.metaKey), e.shiftKey); //multiselection
|
|
else
|
|
this.select(id);
|
|
this._no_animation = false;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
getOpenState:function(){
|
|
return {parents:this._nested_chain,branch:this._nested_cursor};
|
|
},
|
|
render:function(id,data,type,after){
|
|
var i, lastChain;
|
|
|
|
//start filtering processing=>
|
|
this._nested_chain = webix.copy(this._nested_chain);
|
|
this._nested_cursor = webix.copy(this._nested_cursor);
|
|
|
|
if(this._nested_chain.length){
|
|
for(i = 0;i<this._nested_chain.length;i++){
|
|
if(!this.data.branch[this._nested_chain[i]]){
|
|
this._nested_chain.splice(i,1);
|
|
i--;
|
|
}
|
|
}
|
|
}
|
|
lastChain = (this._nested_chain.length?this._nested_chain[this._nested_chain.length-1]:0);
|
|
this._nested_cursor = webix.copy(this.data.branch[lastChain]) ;
|
|
|
|
if(!this._nested_cursor.length&&this._nested_chain.length){
|
|
this._nested_cursor = [lastChain];
|
|
this._nested_chain.pop();
|
|
}
|
|
//<= end filtering processing
|
|
|
|
if (this._in_animation) {
|
|
return webix.delay(this.render, this, arguments, 100);
|
|
}
|
|
for (i=0; i < this._nested_cursor.length; i++)
|
|
this.data.getItem(this._nested_cursor[i]).$template = "";
|
|
|
|
if (!this._nested_cursor.length)
|
|
this._nested_cursor = this.data.branch[0];
|
|
|
|
this.data.order = webix.toArray([].concat(this._nested_chain).concat(this._nested_cursor));
|
|
|
|
if (this.callEvent("onBeforeRender",[this.data])){
|
|
if(this._no_animation || !this._dataobj.innerHTML || !(webix.animate.isSupported() && this._settings.animate) || (this._prev_nested_chain_length == this._nested_chain.length)) { // if dataobj is empty or animation is not supported
|
|
webix.RenderStack.render.apply(this, arguments);
|
|
}
|
|
else {
|
|
//getRange - returns all elements
|
|
if (this.callEvent("onBeforeRender",[this.data])){
|
|
|
|
if(!this._back_scroll_states)
|
|
this._back_scroll_states = [];
|
|
|
|
var next_div = this._dataobj.cloneNode(false);
|
|
next_div.innerHTML = this.data.getRange().map(this._toHTML,this).join("");
|
|
|
|
var aniset = webix.extend({}, this._settings.animate);
|
|
aniset.direction = (this._is_level_down)?'left':'right';
|
|
|
|
/*scroll position restore*/
|
|
var animArr = [webix.clone(aniset),webix.clone(aniset)];
|
|
if(this._is_level_down){
|
|
this._back_scroll_states.push(this.getScrollState());
|
|
if(webix.Touch&&webix.Touch.$active){
|
|
animArr[0].y = 0;
|
|
animArr[1].y = - this.getScrollState().y;
|
|
}
|
|
}
|
|
else{
|
|
var getScrollState = this._back_scroll_states.pop();
|
|
if(webix.Touch&&webix.Touch.$active){
|
|
animArr[0].y = -getScrollState.y;
|
|
animArr[1].y = - this.getScrollState().y;
|
|
}
|
|
}
|
|
|
|
var line = webix.animate.formLine(
|
|
next_div,
|
|
this._dataobj,
|
|
aniset
|
|
);
|
|
|
|
/*keeping scroll position*/
|
|
if(webix.Touch&&webix.Touch.$active)
|
|
webix.Touch._set_matrix(next_div, 0,this._is_level_down?0:animArr[0].y, "0ms");
|
|
|
|
aniset.master = this;
|
|
aniset.callback = function(){
|
|
this._dataobj = next_div;
|
|
|
|
/*scroll position restore*/
|
|
if(!this._is_level_down){
|
|
if(webix.Touch&&webix.Touch.$active){
|
|
webix.delay(function(){
|
|
webix.Touch._set_matrix(next_div, 0,animArr[0].y, "0ms");
|
|
},this);
|
|
} else if (getScrollState)
|
|
this.scrollTo(0,getScrollState.y);
|
|
}
|
|
else if(!(webix.Touch&&webix.Touch.$active)){
|
|
this.scrollTo(0,0);
|
|
}
|
|
|
|
webix.animate.breakLine(line);
|
|
aniset.master = aniset.callback = null;
|
|
this._htmlmap = null; //clear map, it will be filled at first getItemNode
|
|
this._in_animation = false;
|
|
this.callEvent("onAfterRender",[]);
|
|
};
|
|
|
|
this._in_animation = true;
|
|
webix.animate(line, animArr);
|
|
}
|
|
}
|
|
this._prev_nested_chain_length = this._nested_chain.length;
|
|
}
|
|
},
|
|
templateBack_setter:function(config){
|
|
this.type.templateBack = webix.template(config);
|
|
},
|
|
templateItem_setter:function(config){
|
|
this.type.templateItem = webix.template(config);
|
|
},
|
|
templateGroup_setter:function(config){
|
|
this.type.templateGroup = webix.template(config);
|
|
},
|
|
type:{
|
|
template:function(obj, common){
|
|
if (obj.$count)
|
|
return common.templateGroup(obj, common);
|
|
return common.templateItem(obj, common);
|
|
},
|
|
css:"group",
|
|
classname:function(obj, common, marks){
|
|
|
|
return "webix_list_item webix_"+(obj.$count?"group":"item")+(obj.$template?"_back":"")+((marks&&marks.webix_selected)?" webix_selected ":"")+ (obj.$css?obj.$css:"");
|
|
},
|
|
templateStart:webix.template('<div webix_l_id="#id#" class="{common.classname()}" style="width:{common.widthSize()}; height:{common.heightSize()}; overflow:hidden;">'),
|
|
templateBack:webix.template("#value#"),
|
|
templateItem:webix.template("#value#"),
|
|
templateGroup:webix.template("#value#"),
|
|
templateEnd:function(obj, common){
|
|
var html = '';
|
|
if(obj.$count) html += "<div class='webix_arrow_icon'></div>";
|
|
html += "</div>";
|
|
return html;
|
|
}
|
|
},
|
|
showItem:function(id){
|
|
var obj, parent;
|
|
if(id){
|
|
obj = this.getItem(id);
|
|
parent = obj.$parent;
|
|
|
|
if (obj.$count)
|
|
parent = obj.id;
|
|
}
|
|
this._nested_cursor = this.data.branch[parent||0];
|
|
this._nested_chain=[];
|
|
|
|
//build _nested_chain
|
|
while(parent){
|
|
this.getItem(parent).$template = "Back";
|
|
this._nested_chain.unshift(parent);
|
|
parent = this.getItem(parent).$parent;
|
|
}
|
|
|
|
//render
|
|
this._no_animation = true;
|
|
this.render();
|
|
this._no_animation = false;
|
|
|
|
//scroll if necessary
|
|
webix.RenderStack.showItem.call(this,id);
|
|
}
|
|
}, webix.Group, webix.ui.list );
|
|
webix.type(webix.ui.grouplist,{});
|
|
|
|
|
|
webix.protoUI({
|
|
name:"unitlist",
|
|
_id:"webix_item_id",
|
|
uniteBy_setter: webix.template,
|
|
sort_setter: function(config){
|
|
if(typeof(config)!="object")
|
|
config={};
|
|
this._mergeSettings(config,{
|
|
dir:"asc",
|
|
as:"string"
|
|
});
|
|
return config;
|
|
},
|
|
render:function(id,data,type,after){
|
|
var config = this._settings;
|
|
if (!this.isVisible(config.id))
|
|
return;
|
|
if (webix.debug_render)
|
|
webix.log("Render: "+this.name+"@"+config.id);
|
|
if(!config.uniteBy){
|
|
if (webix.debug_render){
|
|
webix.log("uniteBy is undefined");
|
|
}
|
|
return false;
|
|
}
|
|
if (id){
|
|
var cont = this.getItemNode(id); //get html element of updated item
|
|
if(cont&&type=="update"&&(this._settings.uniteBy.call(this,data)==this.getItem(id).$unitValue)){
|
|
var t = this._htmlmap[id] = this._toHTMLObject(data);
|
|
webix.html.insertBefore(t, cont);
|
|
webix.html.remove(cont);
|
|
return;
|
|
}
|
|
}
|
|
//full reset
|
|
if (this.callEvent("onBeforeRender",[this.data])){
|
|
this.units = null;
|
|
this._setUnits();
|
|
if(this.units){
|
|
this._dataobj.innerHTML = this._getUnitRange().map(this._toHTML, this).join("");
|
|
this._htmlmap = null;
|
|
}
|
|
this.callEvent("onAfterRender",[]);
|
|
}
|
|
},
|
|
getUnits:function(){
|
|
var result = [];
|
|
if(this.units){
|
|
for(var b in this.units){
|
|
result.push(b);
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
getUnitList:function(id){
|
|
return (this.units?this.units[id]:null);
|
|
},
|
|
_toHTML:function(obj){
|
|
//check if related template exist
|
|
var mark = this.data._marks[obj.id];
|
|
webix.assert((!obj.$template || this.type["template"+obj.$template]),"RenderStack :: Unknown template: "+obj.$template);
|
|
this.callEvent("onItemRender",[obj]);
|
|
if(obj.$unit){
|
|
return this.type.templateStartHeader(obj,this.type)+this.type.templateHeader.call(this,obj.$unit)+this.type.templateEnd(obj, this.type);
|
|
}
|
|
return this.type.templateStart(obj,this.type,mark)+(obj.$template?this.type["template"+obj.$template]:this.type.template)(obj,this.type)+this.type.templateEnd(obj, this.type);
|
|
},
|
|
_getUnitRange:function(){
|
|
var data,i,u,unit;
|
|
data = [];
|
|
var min = this.data.$min || 0;
|
|
var max = this.data.$max || Infinity;
|
|
var count = 0;
|
|
|
|
for(u in this.units){
|
|
data.push({$unit:u});
|
|
unit = this.units[u];
|
|
for(i=0;i < unit.length;i++){
|
|
if (count == min) data = [{$unit:u}];
|
|
data.push(this.getItem(unit[i]));
|
|
if (count == max) return webix.toArray(data);
|
|
count++;
|
|
}
|
|
}
|
|
|
|
return webix.toArray(data);
|
|
},
|
|
_setUnits: function(){
|
|
var list = this;
|
|
this.units = {};
|
|
this.data.each(function(obj){
|
|
var result = list._settings.uniteBy.call(this,obj);
|
|
obj.$unitValue = result;
|
|
if(!list.units[result])
|
|
list.units[result] = [];
|
|
list.units[result].push(obj.id);
|
|
});
|
|
},
|
|
type:{
|
|
headerHeight: 20,
|
|
templateHeader: function(value){
|
|
return "<span class='webix_unit_header_inner'>"+value+"</span>";
|
|
},
|
|
templateStart:function(obj,type,marks){
|
|
if(obj.$unit)
|
|
return type.templateStartHeader.apply(this,arguments);
|
|
var className = "webix_list_item webix_list_"+(type.css)+"_item"+((marks&&marks.webix_selected)?" webix_selected":"")+type.classname(obj,type,marks);
|
|
var style = "width:"+type.widthSize(obj,type,marks)+"; height:"+type.heightSize(obj,type,marks)+"; overflow:hidden;"+(type.layout&&type.layout=="x"?"float:left;":"");
|
|
return '<div webix_item_id="'+obj.id+'" class="'+className+'" style="'+style+'">';
|
|
},
|
|
templateStartHeader:function(obj,type,marks){
|
|
var className = "webix_unit_header webix_unit_"+(type.css)+"_header"+(obj.$selected?"_selected":"");
|
|
var style = "width:"+type.widthSize(obj,type,marks)+"; height:"+type.headerHeight+"px; overflow:hidden;";
|
|
return '<div webix_unit_id="'+obj.$unit+'" class="'+className+'" style="'+style+'">';
|
|
}
|
|
},
|
|
$skin:function(){
|
|
this.type.headerHeight = webix.skin.$active.unitHeaderHeight||20;
|
|
}
|
|
}, webix.ui.list);
|
|
|
|
/*
|
|
UI:DataView
|
|
*/
|
|
|
|
|
|
|
|
/*
|
|
Behavior:EditAbility - enables item operation for the items
|
|
|
|
@export
|
|
edit
|
|
stopEdit
|
|
*/
|
|
|
|
|
|
|
|
webix.EditAbility={
|
|
defaults:{
|
|
editaction:"click"
|
|
},
|
|
$init:function(config){
|
|
this._editors = {};
|
|
this._in_edit_mode = 0;
|
|
this._edit_open_time = 0;
|
|
this._contentobj.style.position = "relative";
|
|
if (config)
|
|
config.onDblClick = config.onDblClick || {};
|
|
|
|
this.attachEvent("onAfterRender", this._refocus_inline_editor);
|
|
|
|
//when we call webix.extend the editable prop can be already set
|
|
if (this._settings.editable)
|
|
this._init_edit_events_once();
|
|
|
|
// adding undo support
|
|
webix.extend(this,webix.Undo);
|
|
},
|
|
_refocus_try:function(newnode){
|
|
try{ //Chrome throws an error if selectionStart is not accessible
|
|
if (typeof newnode.selectionStart == "number") {
|
|
newnode.selectionStart = newnode.selectionEnd = newnode.value.length;
|
|
} else if (typeof newnode.createTextRange != "undefined") {
|
|
var range = newnode.createTextRange();
|
|
range.collapse(false);
|
|
range.select();
|
|
}
|
|
} catch(e){}
|
|
},
|
|
_refocus_inline_editor:function(){
|
|
var editor = this.getEditor();
|
|
if (editor && editor.$inline && !editor.getPopup){
|
|
var newnode = this._locateInput(editor);
|
|
if (newnode && newnode != editor.node){
|
|
var text = editor.node.value;
|
|
editor.node = newnode;
|
|
newnode.value = text;
|
|
newnode.focus();
|
|
|
|
this._refocus_try(newnode);
|
|
} else
|
|
this.editStop();
|
|
}
|
|
},
|
|
editable_setter:function(value){
|
|
if (value)
|
|
this._init_edit_events_once();
|
|
return value;
|
|
},
|
|
_init_edit_events_once:function(){
|
|
//will close editor on any click outside
|
|
webix.attachEvent("onEditEnd", webix.bind(function(){
|
|
if (this._in_edit_mode)
|
|
this.editStop();
|
|
}, this));
|
|
webix.attachEvent("onClick", webix.bind(function(e){
|
|
//but ignore click which opens editor
|
|
if (this._in_edit_mode && (new Date())-this._edit_open_time > 200){
|
|
if (!this._last_editor || this._last_editor.popupType || !e || ( !this._last_editor.node || !this._last_editor.node.contains(e.target || e.srcElement)))
|
|
this.editStop();
|
|
}
|
|
}, this));
|
|
|
|
//property sheet has simple data object, without events
|
|
if (this.data.attachEvent)
|
|
this.data.attachEvent("onIdChange", webix.bind(function(oldid, newid){
|
|
this._changeEditorId(oldid, newid);
|
|
}, this));
|
|
|
|
//when clicking on row - will start editor
|
|
this.attachEvent("onItemClick", function(id){
|
|
if (this._settings.editable && this._settings.editaction == "click")
|
|
this.edit(id);
|
|
});
|
|
this.attachEvent("onItemDblClick", function(id){
|
|
if (this._settings.editable && this._settings.editaction == "dblclick")
|
|
this.edit(id);
|
|
});
|
|
//each time when we clicking on input, reset timer to prevent self-closing
|
|
this._reset_active_editor = webix.bind(function(){
|
|
this._edit_open_time = new Date();
|
|
},this);
|
|
|
|
this._init_edit_events_once = function(){};
|
|
|
|
if (this._component_specific_edit_init)
|
|
this._component_specific_edit_init();
|
|
},
|
|
_handle_live_edits:function(){
|
|
webix.delay(function(){
|
|
var editor = this.getEditor();
|
|
if (editor && editor.config.liveEdit){
|
|
var state = { value:editor.getValue(), old: editor.value };
|
|
if (state.value == state.old) return;
|
|
|
|
editor.value = state.value;
|
|
this._set_new_value(editor, state.value);
|
|
this.callEvent("onLiveEdit", [state, editor]);
|
|
}
|
|
}, this);
|
|
},
|
|
_show_editor_form:function(id){
|
|
var form = this._settings.form;
|
|
if (typeof form != "string")
|
|
this._settings.form = form = webix.ui(form).config.id;
|
|
|
|
var form = webix.$$(form);
|
|
var realform = form.setValues?form:form.getChildViews()[0];
|
|
|
|
|
|
realform.setValues(this.getItem(id.row || id));
|
|
form.config.master = this.config.id;
|
|
form.show( this.getItemNode(id) );
|
|
|
|
var first = realform.getChildViews()[0];
|
|
if (first.focus)
|
|
first.focus();
|
|
},
|
|
edit:function(id, preserve, show){
|
|
if (!this.callEvent("onBeforeEditStart", [id])) return;
|
|
if (this._settings.form)
|
|
return this._show_editor_form(id);
|
|
|
|
var editor = this._get_editor_type(id);
|
|
if (editor){
|
|
if (this.getEditor(id)) return;
|
|
if (!preserve) this.editStop();
|
|
|
|
//render html input
|
|
webix.assert(webix.editors[editor], "Invalid editor type: "+editor);
|
|
var type = webix.extend({}, webix.editors[editor]);
|
|
|
|
var node = this._init_editor(id, type, show);
|
|
if (type.config.liveEdit)
|
|
this._live_edits_handler = this.attachEvent("onKeyPress", this._handle_live_edits);
|
|
|
|
var area = type.getPopup?type.getPopup(node)._viewobj:node;
|
|
|
|
if (area)
|
|
webix.event(area, "click", this._reset_active_editor);
|
|
if (node)
|
|
webix.event(node, "change", this._on_editor_change, {bind:{ view:this, id:id }});
|
|
if (show !== false)
|
|
type.focus();
|
|
|
|
//save time of creation to prevent instant closing from the same click
|
|
this._edit_open_time = webix.edit_open_time = new Date();
|
|
|
|
webix.UIManager.setFocus(this, true);
|
|
this.callEvent("onAfterEditStart", [id]);
|
|
return type;
|
|
}
|
|
return null;
|
|
},
|
|
getEditor:function(id){
|
|
if (!id)
|
|
return this._last_editor;
|
|
|
|
return this._editors[id];
|
|
},
|
|
_changeEditorId:function(oldid, newid) {
|
|
var editor = this._editors[oldid];
|
|
if (editor){
|
|
this._editors[newid] = editor;
|
|
editor.id = newid;
|
|
delete this._editors[oldid];
|
|
}
|
|
},
|
|
_on_editor_change:function(e){
|
|
if (this.view.hasEvent("onEditorChange"))
|
|
this.view.callEvent("onEditorChange", [this.id, this.view.getEditorValue(this.id) ]);
|
|
},
|
|
_get_edit_config:function(id){
|
|
return this._settings;
|
|
},
|
|
_init_editor:function(id, type, show){
|
|
var config = type.config = this._get_edit_config(id);
|
|
var node = type.render();
|
|
|
|
if (type.$inline)
|
|
node = this._locateInput(id);
|
|
type.node = node;
|
|
|
|
var item = this.getItem(id);
|
|
//value can be configured by editValue option
|
|
var value = item[this._settings.editValue||"value"];
|
|
//if property was not defined - use empty value
|
|
if (webix.isUndefined(value))
|
|
value = "";
|
|
|
|
type.setValue(value, item);
|
|
type.value = value;
|
|
|
|
this._addEditor(id, type);
|
|
|
|
//show it over cell
|
|
if (show !== false)
|
|
this.showItem(id);
|
|
if (!type.$inline)
|
|
this._sizeToCell(id, node, true);
|
|
|
|
if (type.afterRender)
|
|
type.afterRender();
|
|
|
|
return node;
|
|
},
|
|
_locate_cell:function(id){
|
|
return this.getItemNode(id);
|
|
},
|
|
_locateInput:function(id){
|
|
var cell = this._locate_cell(id);
|
|
if (cell)
|
|
cell = cell.getElementsByTagName("input")[0] || cell;
|
|
|
|
return cell;
|
|
},
|
|
_get_editor_type:function(id){
|
|
return this._settings.editor;
|
|
},
|
|
_addEditor:function(id, type){
|
|
type.id = id;
|
|
this._editors[id]= this._last_editor = type;
|
|
this._in_edit_mode++;
|
|
},
|
|
_removeEditor:function(editor){
|
|
if (this._last_editor == editor)
|
|
this._last_editor = 0;
|
|
|
|
if (editor.destroy)
|
|
editor.destroy();
|
|
|
|
delete editor.popup;
|
|
delete editor.node;
|
|
|
|
delete this._editors[editor.id];
|
|
this._in_edit_mode--;
|
|
},
|
|
focusEditor:function(id){
|
|
var editor = this.getEditor.apply(this, arguments);
|
|
if (editor && editor.focus)
|
|
editor.focus();
|
|
},
|
|
editCancel:function(){
|
|
this.editStop(null, null, true);
|
|
},
|
|
_applyChanges: function(el){
|
|
if (el){
|
|
var ed = this.getEditor();
|
|
if (ed && ed.getPopup && ed.getPopup() == el.getTopParentView()) return;
|
|
}
|
|
this.editStop();
|
|
},
|
|
editStop:function(id){
|
|
if (this._edit_stop) return;
|
|
this._edit_stop = 1;
|
|
|
|
|
|
var cancel = arguments[2];
|
|
var result = 1;
|
|
if (!id){
|
|
this._for_each_editor(function(editor){
|
|
result = result * this._editStop(editor, cancel);
|
|
});
|
|
} else
|
|
result = this._editStop(this._editors[id], cancel);
|
|
|
|
this._edit_stop = 0;
|
|
return result;
|
|
},
|
|
_cellPosition:function(id){
|
|
var html = this.getItemNode(id);
|
|
return {
|
|
left:html.offsetLeft,
|
|
top:html.offsetTop,
|
|
height:html.offsetHeight,
|
|
width:html.offsetWidth,
|
|
parent:this._contentobj
|
|
};
|
|
},
|
|
_sizeToCell:function(id, node, inline){
|
|
//fake inputs
|
|
if (!node.style) return;
|
|
|
|
var pos = this._cellPosition(id);
|
|
|
|
node.style.top = pos.top + "px";
|
|
node.style.left = pos.left + "px";
|
|
|
|
node.style.width = pos.width-1+"px";
|
|
node.style.height = pos.height-1+"px";
|
|
|
|
node.top = pos.top; //later will be used during y-scrolling
|
|
|
|
if (inline) pos.parent.appendChild(node);
|
|
},
|
|
_for_each_editor:function(handler){
|
|
for (var editor in this._editors)
|
|
handler.call(this, this._editors[editor]);
|
|
},
|
|
_editStop:function(editor, ignore){
|
|
if (!editor) return;
|
|
var state = {
|
|
value : editor.getValue(),
|
|
old : editor.value
|
|
};
|
|
if (this.callEvent("onBeforeEditStop", [state, editor, ignore])){
|
|
if (!ignore){
|
|
//special case, state.old = 0, state.value = ""
|
|
//we need to state.old to string, to detect the change
|
|
var old = state.old;
|
|
if (typeof state.value == "string") old += "";
|
|
|
|
if (old != state.value || editor.config.liveEdit)
|
|
this.updateItem(this._set_new_value(editor, state.value));
|
|
}
|
|
if (editor.$inline)
|
|
editor.node = null;
|
|
else
|
|
webix.html.remove(editor.node);
|
|
|
|
var popup = editor.config.suggest;
|
|
if (popup && typeof popup == "string")
|
|
webix.$$(popup).hide();
|
|
|
|
this._removeEditor(editor);
|
|
if (this._live_edits_handler)
|
|
this.detachEvent(this._live_edits_handler);
|
|
|
|
this.callEvent("onAfterEditStop", [state, editor, ignore]);
|
|
return 1;
|
|
}
|
|
return 0;
|
|
},
|
|
validateEditor:function(id){
|
|
var result = true;
|
|
if (this._settings.rules){
|
|
var editor = this.getEditor(id);
|
|
var key = editor.column||this._settings.editValue||"value";
|
|
var rule = this._settings.rules[key];
|
|
var all = this._settings.rules.$all;
|
|
|
|
if (rule || all){
|
|
var obj = this.data.getItem(editor.row||editor.id);
|
|
var value = editor.getValue();
|
|
var input = editor.getInputNode();
|
|
|
|
if (rule)
|
|
result = rule.call(this, value, obj, key);
|
|
if (all)
|
|
result = all.call(this, value, obj, key) && result;
|
|
|
|
if (result)
|
|
webix.html.removeCss(input, "webix_invalid");
|
|
else
|
|
webix.html.addCss(input, "webix_invalid");
|
|
|
|
webix.callEvent("onLiveValidation", [editor, result, obj, value]);
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
getEditorValue:function(id){
|
|
var editor;
|
|
if (arguments.length === 0)
|
|
editor = this._last_editor;
|
|
else
|
|
editor = this.getEditor(id);
|
|
|
|
if (editor)
|
|
return editor.getValue();
|
|
},
|
|
getEditState:function(){
|
|
return this._last_editor || false;
|
|
},
|
|
editNext:function(next, from){
|
|
next = next !== false; //true by default
|
|
if (this._in_edit_mode == 1 || from){
|
|
//only if one editor is active
|
|
var editor_next = this._find_cell_next((this._last_editor || from), function(id){
|
|
if (this._get_editor_type(id))
|
|
return true;
|
|
return false;
|
|
}, next);
|
|
|
|
if (this.editStop()){ //if we was able to close previous editor
|
|
if (editor_next){ //and there is a new target
|
|
this.edit(editor_next); //init new editor
|
|
this._after_edit_next(editor_next);
|
|
}
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
//stab, used in datatable
|
|
_after_edit_next:function(){},
|
|
_find_cell_next:function(start, check, direction){
|
|
var row = this.getIndexById(start.id);
|
|
var order = this.data.order;
|
|
|
|
if (direction){
|
|
for (var i=row+1; i<order.length; i++){
|
|
if (check.call(this, order[i]))
|
|
return order[i];
|
|
}
|
|
} else {
|
|
for (var i=row-1; i>=0; i--){
|
|
if (check.call(this, order[i]))
|
|
return order[i];
|
|
}
|
|
}
|
|
|
|
return null;
|
|
},
|
|
_set_new_value:function(editor, new_value){
|
|
this.getItem(editor.id)[this._settings.editValue||"value"] = new_value;
|
|
return editor.id;
|
|
}
|
|
};
|
|
|
|
|
|
(function(){
|
|
|
|
function init_suggest(editor, input){
|
|
var suggest = editor.config.suggest;
|
|
if (suggest){
|
|
var box = editor.config.suggest = create_suggest(suggest);
|
|
var boxobj = webix.$$(box);
|
|
if (boxobj && input)
|
|
boxobj.linkInput(input);
|
|
}
|
|
}
|
|
|
|
function create_suggest(config){
|
|
if (typeof config == "string") return config;
|
|
if (config.linkInput) return config._settings.id;
|
|
|
|
|
|
if (typeof config == "object"){
|
|
if (webix.isArray(config))
|
|
config = { data: config };
|
|
config.view = config.view || "suggest";
|
|
} else if (config === true)
|
|
config = { view:"suggest" };
|
|
|
|
var obj = webix.ui(config);
|
|
return obj.config.id;
|
|
}
|
|
|
|
|
|
/*
|
|
this.node - html node, available after render call
|
|
this.config - editor config
|
|
this.value - original value
|
|
this.popup - id of popup
|
|
*/
|
|
webix.editors = {
|
|
"text":{
|
|
focus:function(){
|
|
this.getInputNode(this.node).focus();
|
|
this.getInputNode(this.node).select();
|
|
},
|
|
getValue:function(){
|
|
return this.getInputNode(this.node).value;
|
|
},
|
|
setValue:function(value){
|
|
var input = this.getInputNode(this.node);
|
|
input.value = value;
|
|
|
|
init_suggest(this, input);
|
|
},
|
|
getInputNode:function(){
|
|
return this.node.firstChild;
|
|
},
|
|
render:function(){
|
|
return webix.html.create("div", {
|
|
"class":"webix_dt_editor"
|
|
}, "<input type='text'>");
|
|
}
|
|
},
|
|
"inline-checkbox":{
|
|
render:function(){ return {}; },
|
|
getValue:function(){
|
|
return this.node.checked;
|
|
},
|
|
setValue:function(){},
|
|
focus:function(){
|
|
this.node.focus();
|
|
},
|
|
getInputNode:function(){},
|
|
$inline:true
|
|
},
|
|
"inline-text":{
|
|
render:function(){ return {}; },
|
|
getValue:function(){
|
|
return this.node.value;
|
|
},
|
|
setValue:function(){},
|
|
focus:function(){
|
|
try{ //IE9
|
|
this.node.select();
|
|
this.node.focus();
|
|
} catch(e){}
|
|
},
|
|
getInputNode:function(){},
|
|
$inline:true
|
|
},
|
|
"checkbox":{
|
|
focus:function(){
|
|
this.getInputNode().focus();
|
|
},
|
|
getValue:function(){
|
|
return this.getInputNode().checked;
|
|
},
|
|
setValue:function(value){
|
|
this.getInputNode().checked = !!value;
|
|
},
|
|
getInputNode:function(){
|
|
return this.node.firstChild.firstChild;
|
|
},
|
|
render:function(){
|
|
return webix.html.create("div", {
|
|
"class":"webix_dt_editor"
|
|
}, "<div><input type='checkbox'></div>");
|
|
}
|
|
},
|
|
"select":{
|
|
focus:function(){
|
|
this.getInputNode().focus();
|
|
},
|
|
getValue:function(){
|
|
return this.getInputNode().value;
|
|
},
|
|
setValue:function(value){
|
|
this.getInputNode().value = value;
|
|
},
|
|
getInputNode:function(){
|
|
return this.node.firstChild;
|
|
},
|
|
render:function(){
|
|
var html = "";
|
|
var options = this.config.options || this.config.collection;
|
|
webix.assert(options,"options not defined for select editor");
|
|
|
|
if (options.data && options.data.each)
|
|
options.data.each(function(obj){
|
|
html +="<option value='"+obj.id+"'>"+obj.value+"</option>";
|
|
});
|
|
else {
|
|
if (webix.isArray(options)){
|
|
for (var i=0; i<options.length; i++){
|
|
var rec = options[i];
|
|
var isplain = webix.isUndefined(rec.id);
|
|
var id = isplain ? rec : rec.id;
|
|
var label = isplain ? rec : rec.value;
|
|
|
|
html +="<option value='"+id+"'>"+label+"</option>";
|
|
}
|
|
} else for (var key in options){
|
|
html +="<option value='"+key+"'>"+options[key]+"</option>";
|
|
}
|
|
}
|
|
|
|
return webix.html.create("div", {
|
|
"class":"webix_dt_editor"
|
|
}, "<select>"+html+"</select>");
|
|
}
|
|
},
|
|
popup:{
|
|
focus:function(){
|
|
this.getInputNode().focus();
|
|
},
|
|
destroy:function(){
|
|
this.getPopup().hide();
|
|
},
|
|
getValue:function(){
|
|
return this.getInputNode().getValue()||"";
|
|
},
|
|
setValue:function(value){
|
|
this.getPopup().show(this.node);
|
|
this.getInputNode().setValue(value);
|
|
},
|
|
getInputNode:function(){
|
|
return this.getPopup().getChildViews()[0];
|
|
},
|
|
getPopup:function(){
|
|
if (!this.config.popup)
|
|
this.config.popup = this.createPopup();
|
|
|
|
return webix.$$(this.config.popup);
|
|
},
|
|
createPopup:function(){
|
|
var popup = this.config.popup || this.config.suggest;
|
|
if (popup){
|
|
var pobj;
|
|
if (typeof popup == "object" && !popup.name){
|
|
popup.view = popup.view || "suggest";
|
|
pobj = webix.ui(popup);
|
|
} else
|
|
pobj = webix.$$(popup);
|
|
|
|
if (pobj.linkInput)
|
|
pobj.linkInput(document.body);
|
|
return pobj;
|
|
}
|
|
|
|
var type = webix.editors.$popup[this.popupType];
|
|
if (typeof type != "string"){
|
|
type = webix.editors.$popup[this.popupType] = webix.ui(type);
|
|
this.popupInit(type);
|
|
}
|
|
|
|
return type._settings.id;
|
|
},
|
|
|
|
popupInit:function(popup){
|
|
|
|
},
|
|
popupType:"text",
|
|
render :function(){ return {}; },
|
|
$inline:true
|
|
}
|
|
};
|
|
|
|
webix.editors.color = webix.extend({
|
|
focus :function(){},
|
|
popupType:"color",
|
|
popupInit:function(popup){
|
|
popup.getChildViews()[0].attachEvent("onSelect", function(value){
|
|
webix.callEvent("onEditEnd",[value]);
|
|
});
|
|
}
|
|
}, webix.editors.popup);
|
|
|
|
webix.editors.date = webix.extend({
|
|
focus :function(){},
|
|
popupType:"date",
|
|
setValue:function(value){
|
|
this._is_string = this.config.stringResult || (value && typeof value == "string");
|
|
webix.editors.popup.setValue.call(this, value);
|
|
},
|
|
getValue:function(){
|
|
return this.getInputNode().getValue(this._is_string?webix.i18n.parseFormatStr:"")||"";
|
|
},
|
|
popupInit:function(popup){
|
|
popup.getChildViews()[0].attachEvent("onDateSelect", function(value){
|
|
webix.callEvent("onEditEnd",[value]);
|
|
});
|
|
}
|
|
}, webix.editors.popup);
|
|
|
|
webix.editors.combo = webix.extend({
|
|
_create_suggest:function(config){
|
|
if(this.config.popup){
|
|
return this.config.popup.config.id;
|
|
}
|
|
else if (config){
|
|
return create_suggest(config);
|
|
} else
|
|
return this._shared_suggest(config);
|
|
},
|
|
_shared_suggest:function(){
|
|
var e = webix.editors.combo;
|
|
return (e._suggest = e._suggest || this._create_suggest(true));
|
|
},
|
|
render:function(){
|
|
var node = webix.html.create("div", {
|
|
"class":"webix_dt_editor"
|
|
}, "<input type='text'>");
|
|
|
|
//save suggest id for future reference
|
|
var suggest = this.config.suggest = this._create_suggest(this.config.suggest);
|
|
|
|
if (suggest){
|
|
webix.$$(suggest).linkInput(node.firstChild, true);
|
|
webix.event(node.firstChild, "click",webix.bind(this.showPopup, this));
|
|
}
|
|
return node;
|
|
},
|
|
getPopup:function(){
|
|
return webix.$$(this.config.suggest);
|
|
},
|
|
showPopup:function(){
|
|
var popup = this.getPopup();
|
|
var list = popup.getList();
|
|
var input = this.getInputNode();
|
|
var value = this.getValue();
|
|
|
|
popup.show(input);
|
|
if(value ){
|
|
webix.assert(list.exists(value), "Option with ID "+value+" doesn't exist");
|
|
if(list.exists(value)){
|
|
list.select(value);
|
|
list.showItem(value);
|
|
}
|
|
}else{
|
|
list.unselect();
|
|
list.showItem(list.getFirstId());
|
|
}
|
|
popup._last_input_target = input;
|
|
},
|
|
afterRender:function(){
|
|
this.showPopup();
|
|
},
|
|
setValue:function(value){
|
|
this._initial_value = value;
|
|
if (this.config.suggest){
|
|
var sobj = webix.$$(this.config.suggest);
|
|
var data = this.config.collection || this.config.options;
|
|
if (data)
|
|
sobj.getList().data.importData(data);
|
|
|
|
this._initial_text = this.getInputNode(this.node).value = sobj.getItemText(value);
|
|
}
|
|
},
|
|
getValue:function(){
|
|
var value = this.getInputNode().value;
|
|
|
|
if (this.config.suggest){
|
|
if (value == this._initial_text)
|
|
return this._initial_value;
|
|
return webix.$$(this.config.suggest).getSuggestion();
|
|
} else
|
|
return value;
|
|
}
|
|
}, webix.editors.text);
|
|
|
|
|
|
webix.editors.richselect = webix.extend({
|
|
focus:function(){},
|
|
getValue:function(){
|
|
return this.getPopup().getValue();
|
|
},
|
|
setValue:function(value){
|
|
var suggest = this.config.collection || this.config.options;
|
|
var list = this.getInputNode();
|
|
if (suggest)
|
|
this.getPopup().getList().data.importData(suggest);
|
|
|
|
this.getPopup().show(this.node);
|
|
this.getPopup().setValue(value);
|
|
},
|
|
getInputNode:function(){
|
|
return this.getPopup().getList();
|
|
},
|
|
popupInit:function(popup){
|
|
popup.linkInput(document.body);
|
|
},
|
|
popupType:"richselect"
|
|
}, webix.editors.popup);
|
|
|
|
webix.editors.password = webix.extend({
|
|
render:function(){
|
|
return webix.html.create("div", {
|
|
"class":"webix_dt_editor"
|
|
}, "<input type='password'>");
|
|
}
|
|
}, webix.editors.text);
|
|
|
|
webix.editors.$popup = {
|
|
text:{
|
|
view:"popup", width:250, height:150,
|
|
body:{ view:"textarea" }
|
|
},
|
|
color:{
|
|
view:"popup",
|
|
body:{ view:"colorboard" }
|
|
},
|
|
date:{
|
|
view:"popup", width:250, height:250, padding:0,
|
|
body:{ view:"calendar", icons:true, borderless:true }
|
|
},
|
|
richselect:{
|
|
view:"suggest",
|
|
body:{ view:"list", select:true }
|
|
}
|
|
};
|
|
|
|
})();
|
|
|
|
|
|
|
|
|
|
/*
|
|
Renders collection of items
|
|
Always shows y-scroll
|
|
Can be used with huge datasets
|
|
|
|
@export
|
|
show
|
|
render
|
|
*/
|
|
|
|
|
|
|
|
webix.VirtualRenderStack={
|
|
$init:function(){
|
|
webix.assert(this.render,"VirtualRenderStack :: Object must use RenderStack first");
|
|
|
|
this._htmlmap={}; //init map of rendered elements
|
|
|
|
//we need to repaint area each time when view resized or scrolling state is changed
|
|
webix.event(this._viewobj,"scroll",webix.bind(this._render_visible_rows,this));
|
|
if(webix.env.touch){
|
|
this.attachEvent("onAfterScroll", webix.bind(this._render_visible_rows,this));
|
|
}
|
|
//here we store IDs of elemenst which doesn't loadede yet, but need to be rendered
|
|
this._unrendered_area=[];
|
|
},
|
|
//return html object by item's ID. Can return null for not-rendering element
|
|
getItemNode:function(search_id){
|
|
//collection was filled in _render_visible_rows
|
|
return this._htmlmap[search_id];
|
|
},
|
|
//adjust scrolls to make item visible
|
|
showItem:function(id){
|
|
var range = this._getVisibleRange();
|
|
var ind = this.data.getIndexById(id);
|
|
//we can't use DOM method for not-rendered-yet items, so fallback to pure math
|
|
var dy = Math.floor(ind/range._dx)*range._y;
|
|
var state = this.getScrollState();
|
|
if (dy<state.y || dy + this._settings.height >= state.y + this._content_height)
|
|
this.scrollTo(0, dy);
|
|
},
|
|
//repain self after changes in DOM
|
|
//for add, delete, move operations - render is delayed, to minify performance impact
|
|
render:function(id,data,type){
|
|
if (!this.isVisible(this._settings.id) || this.$blockRender)
|
|
return;
|
|
|
|
if (webix.debug_render)
|
|
webix.log("Render: "+this.name+"@"+this._settings.id);
|
|
|
|
if (id){
|
|
var cont = this.getItemNode(id); //old html element
|
|
switch(type){
|
|
case "update":
|
|
if (!cont) return;
|
|
//replace old with new
|
|
var t = this._htmlmap[id] = this._toHTMLObject(data);
|
|
webix.html.insertBefore(t, cont);
|
|
webix.html.remove(cont);
|
|
break;
|
|
default: // "move", "add", "delete"
|
|
/*
|
|
for all above operations, full repainting is necessary
|
|
but from practical point of view, we need only one repainting per thread
|
|
code below initiates double-thread-rendering trick
|
|
*/
|
|
this._render_delayed();
|
|
break;
|
|
}
|
|
} else {
|
|
//full repainting
|
|
if (this.callEvent("onBeforeRender",[this.data])){
|
|
this._htmlmap = {}; //nulify links to already rendered elements
|
|
this._render_visible_rows(null, true);
|
|
// clear delayed-rendering, because we already have repaint view
|
|
this._wait_for_render = false;
|
|
this.callEvent("onAfterRender",[]);
|
|
}
|
|
}
|
|
},
|
|
//implement double-thread-rendering pattern
|
|
_render_delayed:function(){
|
|
//this flag can be reset from outside, to prevent actual rendering
|
|
if (this._wait_for_render) return;
|
|
this._wait_for_render = true;
|
|
|
|
window.setTimeout(webix.bind(function(){
|
|
this.render();
|
|
},this),1);
|
|
},
|
|
//create empty placeholders, which will take space before rendering
|
|
_create_placeholder:function(height){
|
|
var node = document.createElement("DIV");
|
|
node.style.cssText = "height:"+height+"px; width:100%; overflow:hidden;";
|
|
return node;
|
|
},
|
|
/*
|
|
Methods get coordinatest of visible area and checks that all related items are rendered
|
|
If, during rendering, some not-loaded items was detected - extra data loading is initiated.
|
|
reset - flag, which forces clearing of previously rendered elements
|
|
*/
|
|
_render_visible_rows:function(e,reset){
|
|
this._unrendered_area=[]; //clear results of previous calls
|
|
|
|
var viewport = this._getVisibleRange(); //details of visible view
|
|
|
|
if (!this._dataobj.firstChild || reset){ //create initial placeholder - for all view space
|
|
this._dataobj.innerHTML="";
|
|
this._dataobj.appendChild(this._create_placeholder(viewport._max));
|
|
//register placeholder in collection
|
|
this._htmlrows = [this._dataobj.firstChild];
|
|
}
|
|
|
|
/*
|
|
virtual rendering breaks all view on rows, because we know widht of item
|
|
we can calculate how much items can be placed on single row, and knowledge
|
|
of that, allows to calculate count of such rows
|
|
|
|
each time after scrolling, code iterate through visible rows and render items
|
|
in them, if they are not rendered yet
|
|
|
|
both rendered rows and placeholders are registered in _htmlrows collection
|
|
*/
|
|
|
|
//position of first visible row
|
|
var t = viewport._from;
|
|
|
|
while(t<=viewport._height){ //loop for all visible rows
|
|
//skip already rendered rows
|
|
while(this._htmlrows[t] && this._htmlrows[t]._filled && t<=viewport._height){
|
|
t++;
|
|
}
|
|
//go out if all is rendered
|
|
if (t>viewport._height) break;
|
|
|
|
//locate nearest placeholder
|
|
var holder = t;
|
|
while (!this._htmlrows[holder]) holder--;
|
|
var holder_row = this._htmlrows[holder];
|
|
|
|
//render elements in the row
|
|
var base = t*viewport._dx+(this.data.$min||0); //index of rendered item
|
|
if (base > (this.data.$max||Infinity)) break; //check that row is in virtual bounds, defined by paging
|
|
var nextpoint = Math.min(base+viewport._dx-1,(this.data.$max?this.data.$max-1:Infinity));
|
|
var node = this._create_placeholder(viewport._y);
|
|
//all items in rendered row
|
|
var range = this.data.getIndexRange(base, nextpoint);
|
|
if (!range.length) break;
|
|
|
|
var loading = { $template:"Loading" };
|
|
for (var i=0; i<range.length; i++){
|
|
if (!range[i])
|
|
this._unrendered_area.push(base+i);
|
|
range[i] = this._toHTML(range[i]||loading);
|
|
}
|
|
|
|
node.innerHTML=range.join(""); //actual rendering
|
|
for (var i=0; i < range.length; i++) //register all new elements for later usage in getItemNode
|
|
this._htmlmap[this.data.getIdByIndex(base+i)]=node.childNodes[i];
|
|
|
|
//correct placeholders
|
|
var h = parseInt(holder_row.style.height,10);
|
|
var delta = (t-holder)*viewport._y;
|
|
var delta2 = (h-delta-viewport._y);
|
|
|
|
//add new row to the DOOM
|
|
webix.html.insertBefore(node,delta?holder_row.nextSibling:holder_row,this._dataobj);
|
|
this._htmlrows[t]=node;
|
|
node._filled = true;
|
|
|
|
/*
|
|
if new row is at start of placeholder - decrease placeholder's height
|
|
else if new row takes whole placeholder - remove placeholder from DOM
|
|
else
|
|
we are inserting row in the middle of existing placeholder
|
|
decrease height of existing one, and add one more,
|
|
before the newly added row
|
|
*/
|
|
if (delta <= 0 && delta2>0){
|
|
holder_row.style.height = delta2+"px";
|
|
this._htmlrows[t+1] = holder_row;
|
|
} else {
|
|
if (delta<0)
|
|
webix.html.remove(holder_row);
|
|
else
|
|
holder_row.style.height = delta+"px";
|
|
if (delta2>0){
|
|
var new_space = this._htmlrows[t+1] = this._create_placeholder(delta2);
|
|
webix.html.insertBefore(new_space,node.nextSibling,this._dataobj);
|
|
}
|
|
}
|
|
|
|
|
|
t++;
|
|
}
|
|
|
|
//when all done, check for non-loaded items
|
|
if (this._unrendered_area.length){
|
|
//we have some data to load
|
|
//detect borders
|
|
var from = this._unrendered_area[0];
|
|
var to = this._unrendered_area.pop()+1;
|
|
if (to>from){
|
|
//initiate data loading
|
|
var count = to - from;
|
|
if (this._maybe_loading_already(count, from)) return;
|
|
|
|
count = Math.max(count, (this._settings.datafetch||this._settings.loadahead||0));
|
|
this.loadNext(count, from);
|
|
}
|
|
}
|
|
},
|
|
//calculates visible view
|
|
_getVisibleRange:function(){
|
|
var state = this.getScrollState();
|
|
var top = state.y;
|
|
var width = this._content_width;
|
|
var height = this._content_height;
|
|
|
|
//size of single item
|
|
var t = this.type;
|
|
|
|
var dx = Math.floor(width/t.width)||1; //at least single item per row
|
|
|
|
var min = Math.floor(top/t.height); //index of first visible row
|
|
var dy = Math.ceil((height+top)/t.height)-1; //index of last visible row
|
|
//total count of items, paging can affect this math
|
|
var count = this.data.$max?(this.data.$max-this.data.$min):this.data.count();
|
|
var max = Math.ceil(count/dx)*t.height; //size of view in rows
|
|
|
|
return { _from:min, _height:dy, _top:top, _max:max, _y:t.height, _dx:dx};
|
|
},
|
|
_cellPosition:function(id){
|
|
var html = this.getItemNode(id);
|
|
if (!html){
|
|
this.showItem(id);
|
|
this._render_visible_rows();
|
|
html = this.getItemNode(id);
|
|
}
|
|
return {
|
|
left:html.offsetLeft,
|
|
top:html.offsetTop,
|
|
height:html.offsetHeight,
|
|
width:html.offsetWidth,
|
|
parent:this._contentobj
|
|
};
|
|
}
|
|
};
|
|
|
|
|
|
webix.protoUI({
|
|
name:"dataview",
|
|
$init:function(config){
|
|
if (config.sizeToContent)
|
|
//method need to be called before data-loaders
|
|
//so we are using unshift to place it at start
|
|
this.$ready.unshift(this._after_init_call);
|
|
var prerender = config.prerender || this.defaults.prerender;
|
|
if (prerender === false || (prerender !== true && config.height !== "auto" && !config.autoheight))
|
|
webix.extend(this, webix.VirtualRenderStack, true);
|
|
if (config.autoheight)
|
|
config.scroll = false;
|
|
|
|
this.attachEvent("onBeforeRender", function(){ this._recalk_counts(); });
|
|
this._contentobj.className+=" webix_dataview";
|
|
},
|
|
_after_init_call:function(){
|
|
var test = webix.html.create("DIV",0,this.type.template({}));
|
|
test.style.position="absolute";
|
|
document.body.appendChild(test);
|
|
this.type.width = test.offsetWidth;
|
|
this.type.height = test.offsetHeight;
|
|
|
|
webix.html.remove(test);
|
|
},
|
|
|
|
defaults:{
|
|
scroll:true,
|
|
datafetch:50
|
|
},
|
|
_id:"webix_f_id",
|
|
on_click:{
|
|
webix_dataview_item:function(e,id){
|
|
if (this._settings.select){
|
|
if (this._settings.select=="multiselect" || this._settings.multiselect)
|
|
this.select(id, false, ((this._settings.multiselect == "touch") || e.ctrlKey || e.metaKey), e.shiftKey); //multiselection
|
|
else
|
|
this.select(id);
|
|
}
|
|
}
|
|
},
|
|
on_dblclick:{
|
|
},
|
|
on_mouse_move:{
|
|
},
|
|
type:{
|
|
//normal state of item
|
|
template:webix.template("#value#"),
|
|
//in case of dyn. loading - temporary spacer
|
|
templateLoading:webix.template("Loading..."),
|
|
|
|
width:160,
|
|
height:50,
|
|
|
|
classname:function(obj, common, marks){
|
|
var css = "webix_dataview_item ";
|
|
|
|
if (common.css) css +=common.css+" ";
|
|
if (obj.$css){
|
|
if (typeof obj.$css == "object")
|
|
obj.$css = webix.html.createCss(obj.$css);
|
|
css +=obj.$css+" ";
|
|
}
|
|
if (marks && marks.$css) css +=marks.$css+" ";
|
|
|
|
return css;
|
|
},
|
|
|
|
templateStart:webix.template('<div webix_f_id="#id#" class="{common.classname()}" style="width:{common.width}px; height:{common.height}px; float:left; overflow:hidden;">'),
|
|
templateEnd:webix.template("</div>")
|
|
|
|
},
|
|
_calck_autoheight:function(width){
|
|
return (this._settings.height = this.type.height * Math.ceil( this.data.count() / Math.floor(width / this.type.width)));
|
|
},
|
|
autoheight_setter:function(mode){
|
|
if (mode){
|
|
this.data.attachEvent("onStoreLoad", webix.bind(this.resize, this));
|
|
this._contentobj.style.overflowY = "hidden";
|
|
}
|
|
return mode;
|
|
},
|
|
$getSize:function(dx, dy){
|
|
if ((this._settings.xCount >0) && this.type.width != "auto" && !this._autowidth)
|
|
this._settings.width = this.type.width*this._settings.xCount + (this._scroll_y?webix.ui.scrollSize:0);
|
|
if (this._settings.yCount && this.type.height != "auto")
|
|
this._settings.height = this.type.height*this._settings.yCount;
|
|
|
|
var width = this._settings.width || this._content_width;
|
|
if (this._settings.autoheight && width){
|
|
this._calck_autoheight(width);
|
|
this.scroll_setter(false);
|
|
}
|
|
return webix.ui.view.prototype.$getSize.call(this, dx, dy);
|
|
},
|
|
_recalk_counts:function(){
|
|
var render = false;
|
|
if (this._settings.yCount && this.type.height == "auto"){
|
|
this.type.height = Math.floor(this._content_height/this._settings.yCount);
|
|
render = true;
|
|
}
|
|
if (this._settings.xCount && (this.type.width == "auto"||this._autowidth)){
|
|
this._autowidth = true; //flag marks that width was set to "auto" initially
|
|
this.type.width = Math.floor(this._content_width/this._settings.xCount);
|
|
render = true;
|
|
} else
|
|
this._autowidth = false;
|
|
|
|
return render;
|
|
},
|
|
$setSize:function(x,y){
|
|
if (webix.ui.view.prototype.$setSize.call(this, x, y)){
|
|
if (this._settings.autoheight && this._calck_autoheight() != this._content_height)
|
|
return webix.delay(this.resize, this);
|
|
|
|
if (this._recalk_counts() || this._render_visible_rows)
|
|
this.render();
|
|
}
|
|
}
|
|
}, webix.DataMove, webix.DragItem, webix.MouseEvents, webix.KeysNavigation, webix.SelectionModel, webix.Scrollable, webix.ui.proto);
|
|
|
|
|
|
|
|
|
|
webix.DataDriver.htmltable={
|
|
|
|
//convert json string to json object if necessary
|
|
toObject:function(data){
|
|
data = webix.toNode(data);
|
|
webix.assert(data, "table is not found");
|
|
webix.assert(data.tagName.toLowerCase() === 'table', "Incorrect table object");
|
|
|
|
var tr = data.rows;
|
|
webix.html.remove(data);
|
|
return tr;
|
|
},
|
|
//get array of records
|
|
getRecords:function(data){
|
|
var new_data = [];
|
|
//skip header rows if necessary
|
|
var i = (data[0] && data[0]._webix_skip)?1:0;
|
|
|
|
for (; i < data.length; i++)
|
|
new_data.push(data[i]);
|
|
return new_data;
|
|
},
|
|
//get hash of properties for single record
|
|
getDetails:function(data){
|
|
var td = data.getElementsByTagName('td');
|
|
data = {};
|
|
//get hash of properties for single record, data named as "data{index}"
|
|
for (var i=0; i < td.length; i++) {
|
|
data['data' + i] = td[i].innerHTML;
|
|
}
|
|
return data;
|
|
},
|
|
//get count of data and position at which new data need to be inserted
|
|
getInfo:function(data){
|
|
// dyn loading is not supported for htmltable
|
|
return {
|
|
_size:0,
|
|
_from:0
|
|
};
|
|
},
|
|
getOptions:function(){},
|
|
|
|
/*! gets header from first table row
|
|
**/
|
|
getConfig: function(data) {
|
|
var columns = [];
|
|
var td = data[0].getElementsByTagName('th');
|
|
if (td.length) data[0]._webix_skip = true;
|
|
for (var i = 0; i < td.length; i++) {
|
|
var col = {
|
|
id: 'data' + i,
|
|
header: this._de_json(td[i].innerHTML)
|
|
};
|
|
var attrs = this._get_attrs(td[i]);
|
|
col = webix.extend(col, attrs);
|
|
columns.push(col);
|
|
}
|
|
return columns;
|
|
},
|
|
|
|
_de_json:function(str){
|
|
var pos = str.indexOf("json://");
|
|
|
|
if (pos != -1)
|
|
str = JSON.parse(str.substr(pos+7));
|
|
return str;
|
|
},
|
|
|
|
/*! gets hash of html-element attributes
|
|
**/
|
|
_get_attrs: function(el) {
|
|
var attr = el.attributes;
|
|
var hash = {};
|
|
for (var i = 0; i < attr.length; i++) {
|
|
hash[attr[i].nodeName] = this._de_json(attr[i].nodeValue);
|
|
}
|
|
hash.width = parseInt(hash.width, 10);
|
|
return hash;
|
|
}
|
|
};
|
|
webix.protoUI({
|
|
name:"vscroll",
|
|
defaults:{
|
|
scroll:"x",
|
|
scrollStep:40,
|
|
scrollPos:0,
|
|
scrollSize:18,
|
|
scrollVisible:1,
|
|
zoom:1
|
|
},
|
|
$init:function(config){
|
|
var dir = config.scroll||"x";
|
|
var node = this._viewobj = webix.toNode(config.container);
|
|
node.className += " webix_vscroll_"+dir;
|
|
node.innerHTML="<div class='webix_vscroll_body'></div>";
|
|
webix.event(node,"scroll", this._onscroll,{bind:this});
|
|
|
|
this._last_set_size = 0;
|
|
this._last_scroll_pos = 0;
|
|
},
|
|
_check_quantum:function(value){
|
|
if (value>1500000){
|
|
this._settings.zoom = Math.floor(value/1500000)+1;
|
|
this._zoom_limit = value-this._last_set_size;
|
|
value = Math.floor(value/this._settings.zoom)+this._last_set_size;
|
|
} else {
|
|
this._settings.zoom = 1;
|
|
this._zoom_limit = Infinity;
|
|
}
|
|
return value;
|
|
},
|
|
scrollWidth_setter:function(value){
|
|
value = this._check_quantum(value);
|
|
this._viewobj.firstChild.style.width = value+"px";
|
|
return value;
|
|
},
|
|
scrollHeight_setter:function(value){
|
|
value = this._check_quantum(value);
|
|
this._viewobj.firstChild.style.height = value+"px";
|
|
return value;
|
|
},
|
|
sizeTo:function(value, top, bottom){
|
|
value = value-(top||0)-(bottom||0);
|
|
|
|
var width = this._settings.scrollSize;
|
|
//IEFix
|
|
//IE doesn't react on scroll-click if it has not at least 1 px of visible content
|
|
if (webix.env.isIE && width)
|
|
width += 1;
|
|
if (!width && this._settings.scrollVisible && !webix.env.$customScroll){
|
|
this._viewobj.style.pointerEvents="none";
|
|
width = 14;
|
|
}
|
|
|
|
if (!width){
|
|
this._viewobj.style.display = 'none';
|
|
} else {
|
|
this._viewobj.style.display = 'block';
|
|
if (top)
|
|
this._viewobj.style.marginTop = top+ "px";
|
|
this._viewobj.style[this._settings.scroll == "x"?"width":"height"] = Math.max(0,value)+"px";
|
|
this._viewobj.style[this._settings.scroll == "x"?"height":"width"] = width+"px";
|
|
}
|
|
|
|
this._last_set_size = value;
|
|
},
|
|
getScroll:function(){
|
|
return this._settings.scrollPos*this._settings.zoom;
|
|
},
|
|
getSize:function(){
|
|
return (this._settings.scrollWidth||this._settings.scrollHeight)*this._settings.zoom;
|
|
},
|
|
scrollTo:function(value){
|
|
if (value<0)
|
|
value = 0;
|
|
var config = this._settings;
|
|
|
|
value = Math.min(((config.scrollWidth||config.scrollHeight)-this._last_set_size)*config.zoom, value);
|
|
|
|
if (value < 0) value = 0;
|
|
var svalue = value/config.zoom;
|
|
|
|
if (this._last_scroll_pos != svalue){
|
|
this._viewobj[config.scroll == "x"?"scrollLeft":"scrollTop"] = svalue;
|
|
this._onscroll_inner(svalue);
|
|
return true;
|
|
}
|
|
},
|
|
_onscroll:function(){
|
|
var x = this._viewobj[this._settings.scroll == "x"?"scrollLeft":"scrollTop"];
|
|
if (x != this._last_scroll_pos)
|
|
this._onscroll_inner(x);
|
|
},
|
|
_onscroll_inner:function(value){
|
|
this._last_scroll_pos = value;
|
|
this._settings.scrollPos = (Math.min(this._zoom_limit, value*this._settings.zoom) || 0);
|
|
|
|
this.callEvent("onScroll",[this._settings.scrollPos]);
|
|
},
|
|
activeArea:function(area, x_mode){
|
|
this._x_scroll_mode = x_mode;
|
|
webix.event(area,"mousewheel",this._on_wheel,{bind:this});
|
|
webix.event(area,"DOMMouseScroll",this._on_wheel,{bind:this});
|
|
// support for touch-screen laptops
|
|
this._add_touch_events(area);
|
|
},
|
|
|
|
_add_touch_events: function(area){
|
|
if(!webix.env.touch && window.navigator.pointerEnabled){
|
|
webix.html.addCss(area,"webix_scroll_touch_ie",true);
|
|
webix.event(area, "pointerdown", function(e){
|
|
if(e.pointerType == "touch" || e.pointerType == "pen"){
|
|
this._start_context = webix.Touch._get_context_m(e);
|
|
this._start_scroll_pos = this._settings.scrollPos;
|
|
}
|
|
},{bind:this});
|
|
|
|
webix.event(document.body, "pointermove", function(e){
|
|
var scroll;
|
|
if(this._start_context){
|
|
this._current_context = webix.Touch._get_context_m(e);
|
|
if(this._settings.scroll == "x" ){
|
|
scroll = this._current_context.x - this._start_context.x;
|
|
}
|
|
else if(this._settings.scroll == "y"){
|
|
scroll = this._current_context.y - this._start_context.y;
|
|
}
|
|
if(scroll && Math.abs(scroll) > 5){
|
|
this.scrollTo(this._start_scroll_pos - scroll);
|
|
}
|
|
}
|
|
},{bind:this});
|
|
webix.event(window, "pointerup", function(e){
|
|
if(this._start_context){
|
|
this._start_context = this._current_context = null;
|
|
}
|
|
},{bind:this});
|
|
}
|
|
|
|
},
|
|
_on_wheel:function(e){
|
|
var dir = 0;
|
|
|
|
if (e.wheelDeltaX && Math.abs(e.wheelDeltaX) > Math.abs(e.wheelDeltaY)){
|
|
//x-scroll
|
|
if (this._x_scroll_mode && this._settings.scrollVisible)
|
|
dir = e.wheelDeltaX / -40;
|
|
} else {
|
|
//y-scroll
|
|
if (!this._x_scroll_mode && this._settings.scrollVisible){
|
|
if (webix.isUndefined(e.wheelDelta))
|
|
dir = e.detail;
|
|
else
|
|
dir = e.wheelDelta / -40;
|
|
}
|
|
}
|
|
|
|
// Safari requires target preserving
|
|
// (used in _check_rendered_cols of DataTable)
|
|
if(webix.env.isSafari)
|
|
this._scroll_trg = e.target|| e.srcElement;
|
|
|
|
if (dir)
|
|
if (this.scrollTo(this._settings.scrollPos + dir*this._settings.scrollStep))
|
|
return webix.html.preventEvent(e);
|
|
|
|
}
|
|
}, webix.EventSystem, webix.Settings);
|
|
|
|
|
|
webix.Number={
|
|
format: function(value, config){
|
|
if (value === "" || typeof value === "undefined") return value;
|
|
|
|
config = config||webix.i18n;
|
|
value = parseFloat(value);
|
|
|
|
var sign = value < 0 ? "-":"";
|
|
value = Math.abs(value);
|
|
|
|
var str = value.toFixed(config.decimalSize).toString();
|
|
str = str.split(".");
|
|
|
|
var int_value = "";
|
|
if (config.groupSize){
|
|
var step = config.groupSize;
|
|
var i=str[0].length;
|
|
do {
|
|
i-=step;
|
|
var chunk = (i>0)?str[0].substr(i,step):str[0].substr(0,step+i);
|
|
int_value = chunk+(int_value?config.groupDelimiter+int_value:"");
|
|
} while(i>0);
|
|
} else
|
|
int_value = str[0];
|
|
|
|
if (config.decimalSize)
|
|
return sign + int_value + config.decimalDelimiter + str[1];
|
|
else
|
|
return sign + int_value;
|
|
},
|
|
numToStr:function(config){
|
|
return function(value){
|
|
return webix.Number.format(value, config);
|
|
};
|
|
}
|
|
};
|
|
|
|
webix.Date={
|
|
startOnMonday:false,
|
|
|
|
toFixed:function(num){
|
|
if (num<10) return "0"+num;
|
|
return num;
|
|
},
|
|
weekStart:function(date){
|
|
date = this.copy(date);
|
|
|
|
var shift=date.getDay();
|
|
if (this.startOnMonday){
|
|
if (shift===0) shift=6;
|
|
else shift--;
|
|
}
|
|
return this.datePart(this.add(date,-1*shift,"day"));
|
|
},
|
|
monthStart:function(date){
|
|
date = this.copy(date);
|
|
|
|
date.setDate(1);
|
|
return this.datePart(date);
|
|
},
|
|
yearStart:function(date){
|
|
date = this.copy(date);
|
|
|
|
date.setMonth(0);
|
|
return this.monthStart(date);
|
|
},
|
|
dayStart:function(date){
|
|
return this.datePart(date, true);
|
|
},
|
|
dateToStr:function(format,utc){
|
|
if (typeof format == "function") return format;
|
|
|
|
if(webix.env.strict){
|
|
return function(date){
|
|
var str = "";
|
|
var lastPos = 0;
|
|
format.replace(/%[a-zA-Z]/g,function(s,pos){
|
|
str += format.slice(lastPos,pos);
|
|
var fn = function(date){
|
|
if( s == "%d") return webix.Date.toFixed(date.getDate());
|
|
if( s == "%m") return webix.Date.toFixed((date.getMonth()+1));
|
|
if( s == "%j") return date.getDate();
|
|
if( s == "%n") return (date.getMonth()+1);
|
|
if( s == "%y") return webix.Date.toFixed(date.getFullYear()%100);
|
|
if( s == "%Y") return date.getFullYear();
|
|
if( s == "%D") return webix.i18n.calendar.dayShort[date.getDay()];
|
|
if( s == "%l") return webix.i18n.calendar.dayFull[date.getDay()];
|
|
if( s == "%M") return webix.i18n.calendar.monthShort[date.getMonth()];
|
|
if( s == "%F") return webix.i18n.calendar.monthFull[date.getMonth()];
|
|
if( s == "%h") return webix.Date.toFixed((date.getHours()+11)%12+1);
|
|
if( s == "%g") return ((date.getHours()+11)%12+1);
|
|
if( s == "%G") return date.getHours();
|
|
if( s == "%H") return webix.Date.toFixed(date.getHours());
|
|
if( s == "%i") return webix.Date.toFixed(date.getMinutes());
|
|
if( s == "%a") return (date.getHours()>11?"pm":"am");
|
|
if( s == "%A") return (date.getHours()>11?"PM":"AM");
|
|
if( s == "%s") return webix.Date.toFixed(date.getSeconds());
|
|
if( s == "%W") return webix.Date.toFixed(webix.Date.getISOWeek(date));
|
|
if( s == "%c"){
|
|
var str = date.getFullYear();
|
|
str += "-"+webix.Date.toFixed((date.getMonth()+1));
|
|
str += "-"+webix.Date.toFixed(date.getDate());
|
|
str += "T";
|
|
str += webix.Date.toFixed(date.getHours());
|
|
str += ":"+webix.Date.toFixed(date.getMinutes());
|
|
str += ":"+webix.Date.toFixed(date.getSeconds());
|
|
return str;
|
|
}
|
|
return s;
|
|
};
|
|
str += fn(date);
|
|
lastPos = pos + 2;
|
|
});
|
|
str += format.slice(lastPos,format.length);
|
|
return str;
|
|
};
|
|
|
|
}
|
|
|
|
format=format.replace(/%[a-zA-Z]/g,function(a){
|
|
switch(a){
|
|
case "%d": return "\"+webix.Date.toFixed(date.getDate())+\"";
|
|
case "%m": return "\"+webix.Date.toFixed((date.getMonth()+1))+\"";
|
|
case "%j": return "\"+date.getDate()+\"";
|
|
case "%n": return "\"+(date.getMonth()+1)+\"";
|
|
case "%y": return "\"+webix.Date.toFixed(date.getFullYear()%100)+\"";
|
|
case "%Y": return "\"+date.getFullYear()+\"";
|
|
case "%D": return "\"+webix.i18n.calendar.dayShort[date.getDay()]+\"";
|
|
case "%l": return "\"+webix.i18n.calendar.dayFull[date.getDay()]+\"";
|
|
case "%M": return "\"+webix.i18n.calendar.monthShort[date.getMonth()]+\"";
|
|
case "%F": return "\"+webix.i18n.calendar.monthFull[date.getMonth()]+\"";
|
|
case "%h": return "\"+webix.Date.toFixed((date.getHours()+11)%12+1)+\"";
|
|
case "%g": return "\"+((date.getHours()+11)%12+1)+\"";
|
|
case "%G": return "\"+date.getHours()+\"";
|
|
case "%H": return "\"+webix.Date.toFixed(date.getHours())+\"";
|
|
case "%i": return "\"+webix.Date.toFixed(date.getMinutes())+\"";
|
|
case "%a": return "\"+(date.getHours()>11?\"pm\":\"am\")+\"";
|
|
case "%A": return "\"+(date.getHours()>11?\"PM\":\"AM\")+\"";
|
|
case "%s": return "\"+webix.Date.toFixed(date.getSeconds())+\"";
|
|
case "%W": return "\"+webix.Date.toFixed(webix.Date.getISOWeek(date))+\"";
|
|
case "%c":
|
|
var str = "\"+date.getFullYear()+\"";
|
|
str += "-\"+webix.Date.toFixed((date.getMonth()+1))+\"";
|
|
str += "-\"+webix.Date.toFixed(date.getDate())+\"";
|
|
str += "T";
|
|
str += "\"+webix.Date.toFixed(date.getHours())+\"";
|
|
str += ":\"+webix.Date.toFixed(date.getMinutes())+\"";
|
|
str += ":\"+webix.Date.toFixed(date.getSeconds())+\"";
|
|
if(utc === true)
|
|
str += "Z";
|
|
return str;
|
|
|
|
default: return a;
|
|
}
|
|
});
|
|
if (utc===true) format=format.replace(/date\.get/g,"date.getUTC");
|
|
return new Function("date","if (!date) return ''; if (!date.getMonth) date=webix.i18n.parseFormatDate(date); return \""+format+"\";");
|
|
},
|
|
strToDate:function(format,utc){
|
|
if (typeof format == "function") return format;
|
|
|
|
var mask=format.match(/%[a-zA-Z]/g);
|
|
var splt="var temp=date.split(/[^0-9a-zA-Z]+/g);";
|
|
var i,t,s;
|
|
|
|
if(!webix.i18n.calendar.monthShort_hash){
|
|
s = webix.i18n.calendar.monthShort;
|
|
t = webix.i18n.calendar.monthShort_hash = {};
|
|
for (i = 0; i < s.length; i++)
|
|
t[s[i]]=i;
|
|
|
|
s = webix.i18n.calendar.monthFull;
|
|
t = webix.i18n.calendar.monthFull_hash = {};
|
|
for (i = 0; i < s.length; i++)
|
|
t[s[i]]=i;
|
|
}
|
|
|
|
if(webix.env.strict){
|
|
return function(date){
|
|
if (!date) return '';
|
|
if (typeof date == 'object') return date;
|
|
var temp=date.split(/[^0-9a-zA-Z]+/g);
|
|
var set=[0,0,1,0,0,0];
|
|
for (i=0; i<mask.length; i++){
|
|
var a = mask[i];
|
|
if( a == "%y")
|
|
set[0]=temp[i]*1+(temp[i]>30?1900:2000);
|
|
else if( a == "%Y"){
|
|
set[0]=(temp[i]||0)*1; if (set[0]<30) set[0]+=2000;
|
|
}
|
|
else if( a == "%n" || a == "%m")
|
|
set[1]=(temp[i]||1)-1;
|
|
else if( a == "%M")
|
|
set[1]=webix.i18n.calendar.monthShort_hash[temp[i]]||0;
|
|
else if( a == "%F")
|
|
set[1]=webix.i18n.calendar.monthFull_hash[temp[i]]||0;
|
|
else if( a == "%j" || a == "%d")
|
|
set[2]=temp[i]||1;
|
|
else if( a == "%g" || a == "%G" || a == "%h" || a == "%H")
|
|
set[3]=temp[i]||0;
|
|
else if( a == "%a" || a == "%A")
|
|
set[3]=set[3]%12+((temp[i]||'').toLowerCase()=='am'?0:12);
|
|
else if( a == "%i")
|
|
set[4]=temp[i]||0;
|
|
else if( a == "%s")
|
|
set[5]=temp[i]||0;
|
|
else if( a == "%c"){
|
|
var reg = /(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+)/g;
|
|
var res = reg.exec(date);
|
|
set[0]= (res[1]||0)*1; if (set[0]<30) set[0]+=2000;
|
|
set[1]= (res[2]||1)-1;
|
|
set[2]= res[3]||1;
|
|
set[3]= res[4]||0;
|
|
set[4]= res[5]||0;
|
|
set[5]= res[6]||0;
|
|
}
|
|
}
|
|
if(utc)
|
|
return new Date(Date.UTC(set[0],set[1],set[2],set[3],set[4],set[5]));
|
|
return new Date(set[0],set[1],set[2],set[3],set[4],set[5]);
|
|
};
|
|
}
|
|
|
|
for (i=0; i<mask.length; i++){
|
|
switch(mask[i]){
|
|
case "%j":
|
|
case "%d": splt+="set[2]=temp["+i+"]||1;";
|
|
break;
|
|
case "%n":
|
|
case "%m": splt+="set[1]=(temp["+i+"]||1)-1;";
|
|
break;
|
|
case "%y": splt+="set[0]=temp["+i+"]*1+(temp["+i+"]>30?1900:2000);";
|
|
break;
|
|
case "%g":
|
|
case "%G":
|
|
case "%h":
|
|
case "%H":
|
|
splt+="set[3]=temp["+i+"]||0;";
|
|
break;
|
|
case "%i":
|
|
splt+="set[4]=temp["+i+"]||0;";
|
|
break;
|
|
case "%Y": splt+="set[0]=(temp["+i+"]||0)*1; if (set[0]<30) set[0]+=2000;";
|
|
break;
|
|
case "%a":
|
|
case "%A": splt+="set[3]=set[3]%12+((temp["+i+"]||'').toLowerCase()=='am'?0:12);";
|
|
break;
|
|
case "%s": splt+="set[5]=temp["+i+"]||0;";
|
|
break;
|
|
case "%M": splt+="set[1]=webix.i18n.calendar.monthShort_hash[temp["+i+"]]||0;";
|
|
break;
|
|
case "%F": splt+="set[1]=webix.i18n.calendar.monthFull_hash[temp["+i+"]]||0;";
|
|
break;
|
|
case "%c":
|
|
splt+= "var res = date.split('T');";
|
|
splt+= "if(res[0]){ var d = res[0].split('-');";
|
|
splt+= "set[0]= (d[0]||0)*1; if (set[0]<30) set[0]+=2000;";
|
|
splt+= "set[1]= (d[1]||1)-1;";
|
|
splt+= "set[2]= d[2]||1;}";
|
|
splt+= "if(res[1]){ var t = res[1].split(':');";
|
|
splt+= "set[3]= t[0]||0;";
|
|
splt+= "set[4]= t[1]||0;";
|
|
splt+= "set[5]= t[2]||0;}";
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
var code ="set[0],set[1],set[2],set[3],set[4],set[5]";
|
|
if (utc) code =" Date.UTC("+code+")";
|
|
return new Function("date","if (!date) return ''; if (typeof date == 'object') return date; var set=[0,0,1,0,0,0]; "+splt+" return new Date("+code+");");
|
|
},
|
|
|
|
getISOWeek: function(ndate) {
|
|
if(!ndate) return false;
|
|
var nday = ndate.getDay();
|
|
if (nday === 0) {
|
|
nday = 7;
|
|
}
|
|
var first_thursday = new Date(ndate.valueOf());
|
|
first_thursday.setDate(ndate.getDate() + (4 - nday));
|
|
var year_number = first_thursday.getFullYear(); // year of the first Thursday
|
|
var ordinal_date = Math.floor( (first_thursday.getTime() - new Date(year_number, 0, 1).getTime()) / 86400000); //ordinal date of the first Thursday - 1 (so not really ordinal date)
|
|
var weekNumber = 1 + Math.floor( ordinal_date / 7);
|
|
return weekNumber;
|
|
},
|
|
|
|
getUTCISOWeek: function(ndate){
|
|
return this.getISOWeek(ndate);
|
|
},
|
|
_correctDate: function(d,d0,inc,checkFunc){
|
|
if(!inc)
|
|
return;
|
|
var incorrect = checkFunc(d,d0);
|
|
if(incorrect){
|
|
var i = (inc>0?1:-1);
|
|
|
|
while(incorrect){
|
|
d.setHours(d.getHours()+i);
|
|
incorrect = checkFunc(d,d0);
|
|
i += (inc>0?1:-1);
|
|
}
|
|
}
|
|
},
|
|
add:function(date,inc,mode,copy){
|
|
if (copy) date = this.copy(date);
|
|
var d = webix.Date.copy(date);
|
|
switch(mode){
|
|
case "day":
|
|
date.setDate(date.getDate()+inc);
|
|
this._correctDate(date,d,inc,function(d,d0){
|
|
return webix.Date.datePart(d0,true).valueOf()== webix.Date.datePart(d,true).valueOf();
|
|
});
|
|
break;
|
|
case "week":
|
|
date.setDate(date.getDate()+7*inc);
|
|
this._correctDate(date,d,7*inc,function(d,d0){
|
|
return webix.Date.datePart(d0,true).valueOf()== webix.Date.datePart(d,true).valueOf();
|
|
});
|
|
break;
|
|
case "month":
|
|
date.setMonth(date.getMonth()+inc);
|
|
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){
|
|
return d0.getFullYear() == d.getFullYear();
|
|
});
|
|
break;
|
|
case "hour":
|
|
date.setHours(date.getHours()+inc);
|
|
this._correctDate(date,d,inc,function(d,d0){
|
|
return d0.getHours() == d.getHours() && webix.Date.datePart(d0,true)== webix.Date.datePart(d,true);
|
|
});
|
|
break;
|
|
case "minute": date.setMinutes(date.getMinutes()+inc); break;
|
|
default:
|
|
webix.Date.add[mode](date, inc, mode);
|
|
break;
|
|
}
|
|
return date;
|
|
},
|
|
datePart:function(date, copy){
|
|
if (copy) date = this.copy(date);
|
|
|
|
// workaround for non-existent hours
|
|
var d = this.copy(date);
|
|
d.setHours(0);
|
|
if(d.getDate()!=date.getDate()){
|
|
date.setHours(1);
|
|
}
|
|
else{
|
|
date.setHours(0);
|
|
}
|
|
|
|
date.setMinutes(0);
|
|
date.setSeconds(0);
|
|
date.setMilliseconds(0);
|
|
return date;
|
|
},
|
|
timePart:function(date, copy){
|
|
if (copy) date = this.copy(date);
|
|
return (date.valueOf()/1000 - date.getTimezoneOffset()*60)%86400;
|
|
},
|
|
copy:function(date){
|
|
return new Date(date.valueOf());
|
|
},
|
|
equal:function(a,b){
|
|
if (!a || !b) return false;
|
|
return a.valueOf() === b.valueOf();
|
|
},
|
|
isHoliday:function(day){
|
|
day = day.getDay();
|
|
if (day === 0 || day==6) return "webix_cal_event";
|
|
}
|
|
};
|
|
|
|
|
|
webix.i18n = {
|
|
_dateMethods:["fullDateFormat", "timeFormat", "dateFormat", "longDateFormat", "parseFormat", "parseTimeFormat"],
|
|
parseFormat:"%Y-%m-%d %H:%i",
|
|
parseTimeFormat:"%H:%i",
|
|
numberFormat:webix.Number.format,
|
|
priceFormat:function(value){ return webix.i18n._price_format(webix.i18n.numberFormat(value, webix.i18n._price_settings)); },
|
|
|
|
setLocale:function(locale){
|
|
var extend = function(base,source){
|
|
for (var method in source){
|
|
if(typeof(source[method]) == "object" && !webix.isArray(source[method])){
|
|
if(!base[method]){
|
|
base[method] = {};
|
|
}
|
|
extend(base[method],source[method]);
|
|
}
|
|
else
|
|
base[method] = source[method];
|
|
}
|
|
};
|
|
|
|
if (typeof locale == "string")
|
|
locale = this.locales[locale];
|
|
if (locale){
|
|
extend(this, locale);
|
|
}
|
|
var helpers = webix.i18n._dateMethods;
|
|
for( var i=0; i<helpers.length; i++){
|
|
var key = helpers[i];
|
|
var utc = webix.i18n[key+"UTC"];
|
|
webix.i18n[key+"Str"] = webix.Date.dateToStr(webix.i18n[key], utc);
|
|
webix.i18n[key+"Date"] = webix.Date.strToDate(webix.i18n[key], utc);
|
|
}
|
|
|
|
this._price_format = webix.template(this.price);
|
|
this._price_settings = this.priceSettings || this;
|
|
|
|
this.intFormat = webix.Number.numToStr({ groupSize:this.groupSize, groupDelimiter:this.groupDelimiter, decimalSize : 0});
|
|
}
|
|
};
|
|
|
|
|
|
webix.i18n.locales={};
|
|
webix.i18n.locales["en-US"]={
|
|
groupDelimiter:",",
|
|
groupSize:3,
|
|
decimalDelimiter:".",
|
|
decimalSize:2,
|
|
|
|
dateFormat:"%m/%d/%Y",
|
|
timeFormat:"%h:%i %A",
|
|
longDateFormat:"%d %F %Y",
|
|
fullDateFormat:"%m/%d/%Y %h:%i %A",
|
|
|
|
price:"${obj}",
|
|
priceSettings:{
|
|
groupDelimiter:",",
|
|
groupSize:3,
|
|
decimalDelimiter:".",
|
|
decimalSize:2
|
|
},
|
|
fileSize: ["b","Kb","Mb","Gb","Tb","Pb","Eb"],
|
|
|
|
calendar: {
|
|
monthFull:["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
|
|
monthShort:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
|
dayFull:["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
|
|
dayShort:["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
|
hours: "Hours",
|
|
minutes: "Minutes",
|
|
done:"Done",
|
|
clear: "Clear",
|
|
today: "Today"
|
|
},
|
|
|
|
controls:{
|
|
select:"Select"
|
|
},
|
|
dataExport:{
|
|
page:"Page",
|
|
of:"of"
|
|
}
|
|
};
|
|
webix.i18n.setLocale("en-US");
|
|
|
|
|
|
|
|
webix.Undo= {
|
|
$init:function(){
|
|
this._undoHistory = webix.extend([],webix.PowerArray,true);
|
|
this._undoCursor = -1;
|
|
},
|
|
undo_setter: function(value){
|
|
if(value){
|
|
this._init_undo();
|
|
this._init_undo = function(){};
|
|
}
|
|
return value;
|
|
},
|
|
_init_undo: function(){
|
|
var view = this;
|
|
|
|
// drag-n-drop
|
|
this.attachEvent("onBeforeDrop", function(context){
|
|
if(context.from == context.to){
|
|
var item = view._draggedItem = webix.copy(this.getItem(context.start));
|
|
if(this.data.branch){
|
|
item.$index = this.getBranchIndex(item.id);
|
|
}
|
|
else
|
|
item.$index = this.getIndexById(item.id);
|
|
}
|
|
});
|
|
this.data.attachEvent("onDataMove", function( sid ){
|
|
if(view._draggedItem && view._draggedItem.id == sid){
|
|
var data = view._draggedItem;
|
|
view._draggedItem = null;
|
|
view._addToHistory(sid, data, "move");
|
|
}
|
|
});
|
|
|
|
// edit, add, remove
|
|
this.attachEvent("onBeforeEditStop", function(state, editor){
|
|
this._editedItem = webix.copy(this.getItem(editor.id||editor.row));
|
|
});
|
|
this.data.attachEvent("onBeforeDelete", function(id){
|
|
if(this.getItem(id)){
|
|
var item = view._deletedItem = webix.copy(this.getItem(id));
|
|
if(this.branch){
|
|
item.$index = this.getBranchIndex(id);
|
|
if(this.branch[id])
|
|
item.$branch = webix.copy(this.serialize(id));
|
|
}
|
|
else
|
|
item.$index = this.getIndexById(id);
|
|
}
|
|
});
|
|
this.data.attachEvent("onStoreUpdated", function(id, item, mode){
|
|
var data = null;
|
|
if(id){
|
|
if(mode == "add"){
|
|
data = webix.copy(item);
|
|
}
|
|
else if( mode == "delete"){
|
|
data = view._deletedItem;
|
|
}
|
|
else if(mode == "update"){
|
|
// update can also be called due to custom updateItem call
|
|
if(view._editedItem && view._editedItem.id == id){
|
|
data = view._editedItem;
|
|
view._editedItem = null;
|
|
}
|
|
}
|
|
|
|
if(data)
|
|
view._addToHistory(id, data, mode);
|
|
}
|
|
});
|
|
|
|
// id change
|
|
this.data.attachEvent("onIdChange", function(oldId,newId){
|
|
if(typeof oldId == "object")
|
|
oldId = oldId.row;
|
|
for(var i =0; i < view._undoHistory.length; i++){
|
|
if(view._undoHistory[i].id == oldId){
|
|
view._undoHistory[i].id = newId;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
_addToHistory: function(id, data, action){
|
|
if(!this._skipHistory && this._settings.undo){
|
|
this._undoHistory.push({id: id, action: action, data: data});
|
|
if(this._undoHistory.length==20)
|
|
this._undoHistory.splice(0,1);
|
|
if(!this._skipCursorInc)
|
|
this._undoCursor = this._undoHistory.length - 1;
|
|
}
|
|
},
|
|
ignoreUndo: function(func, master){
|
|
this._skipHistory = true;
|
|
func.call(master||this);
|
|
this._skipHistory = false;
|
|
},
|
|
removeUndo: function(id){
|
|
for( var i = this._undoHistory.length-1; i >=0; i--){
|
|
if(this._undoHistory[i].id == id){
|
|
if(this._undoHistory[i].action == "id"){
|
|
id = this._undoHistory[i].data;
|
|
}
|
|
this._undoHistory.removeAt(i);
|
|
}
|
|
}
|
|
this._undoCursor = this._undoHistory.length - 1;
|
|
},
|
|
undo: function(id){
|
|
if(id){
|
|
this.ignoreUndo(function(){
|
|
var data, i;
|
|
for( i = this._undoHistory.length-1; !data && i >=0; i--){
|
|
if(this._undoHistory[i].id == id)
|
|
data = this._undoHistory[i];
|
|
}
|
|
|
|
if(data){
|
|
/*if(data.action == "id")
|
|
id = data.data;*/
|
|
this._undoAction(data);
|
|
this._undoHistory.removeAt(i+1);
|
|
this._undoCursor = this._undoHistory.length - 1;
|
|
}
|
|
});
|
|
}
|
|
else{
|
|
var data = this._undoHistory[this._undoCursor];
|
|
if(data){
|
|
this.ignoreUndo(function(){
|
|
this._undoAction(data);
|
|
this._undoHistory.removeAt(this._undoCursor);
|
|
});
|
|
this._undoCursor--;
|
|
/*if(data.action == "id")
|
|
this.undo();*/
|
|
}
|
|
}
|
|
},
|
|
_undoAction: function(obj){
|
|
if(obj.action == "delete"){
|
|
var branch = null,
|
|
parentId = obj.data.$parent;
|
|
|
|
if(obj.data.$branch){
|
|
branch = {
|
|
parent: obj.id,
|
|
data: webix.copy(obj.data.$branch)
|
|
};
|
|
delete obj.data.$branch;
|
|
if(parentId && !this.data.branch[parentId])
|
|
parentId = 0;
|
|
}
|
|
|
|
this.add(obj.data, obj.data.$index, parentId);
|
|
if(branch){
|
|
this.parse(branch);
|
|
}
|
|
}
|
|
else if(obj.action == "add"){
|
|
this.remove(obj.id);
|
|
}
|
|
else if(obj.action == "update"){
|
|
this.updateItem(obj.id, obj.data);
|
|
}
|
|
else if(obj.action == "move"){
|
|
if(obj.data.$parent){
|
|
if(this.getItem(obj.data.$parent))
|
|
this.move(obj.id, obj.data.$index, null, {parent: obj.data.$parent});
|
|
}
|
|
else
|
|
this.move(obj.id, obj.data.$index);
|
|
}
|
|
/*else if(obj.action == "id"){
|
|
this.data.changeId(obj.id, obj.data);
|
|
}*/
|
|
}
|
|
};
|
|
|
|
webix.protoUI({
|
|
name:"datatable",
|
|
defaults:{
|
|
leftSplit:0,
|
|
rightSplit:0,
|
|
columnWidth:100,
|
|
minColumnWidth:20,
|
|
minColumnHeight:26,
|
|
prerender:false,
|
|
autoheight:false,
|
|
autowidth:false,
|
|
header:true,
|
|
fixedRowHeight:true,
|
|
scrollAlignY:true,
|
|
scrollX:true,
|
|
scrollY:true,
|
|
datafetch:50
|
|
},
|
|
|
|
$skin:function(){
|
|
var height = webix.skin.$active.rowHeight;
|
|
var defaults = this.defaults;
|
|
defaults.rowHeight = height;
|
|
defaults.headerRowHeight = webix.skin.$active.barHeight;
|
|
},
|
|
on_click:{
|
|
webix_richfilter:function(){
|
|
return false;
|
|
},
|
|
webix_table_checkbox:function(e, id){
|
|
id = this.locate(e);
|
|
|
|
var item = this.getItem(id.row);
|
|
var col = this.getColumnConfig(id.column);
|
|
var trg = e.target|| e.srcElement;
|
|
|
|
//read actual value from HTML tag when possible
|
|
//as it can be affected by dbl-clicks
|
|
var check = (trg.type == "checkbox")?trg.checked:(item[id.column] != col.checkValue);
|
|
var value = check ? col.checkValue : col.uncheckValue;
|
|
|
|
item[id.column] = value;
|
|
|
|
this.callEvent("onCheck", [id.row, id.column, value]);
|
|
this.data.callEvent("onDataUpdate", [id, item]);
|
|
this.data.callEvent("onStoreUpdated", [id.row, item, (this._settings.checkboxRefresh?"update":"save")]);
|
|
return false;
|
|
},
|
|
webix_table_radio:function(e){
|
|
var id = this.locate(e);
|
|
|
|
var item = this.getItem(id.row);
|
|
var col = this.getColumnConfig(id.column);
|
|
|
|
var checked = 0;
|
|
this.eachRow(function(rowid){
|
|
var item = this.data.pull[rowid];
|
|
if (item && item[id.column] == col.checkValue)
|
|
item[id.column] = col.uncheckValue;
|
|
});
|
|
|
|
item[id.column] = col.checkValue;
|
|
|
|
this.callEvent("onCheck", [id.row, id.column, true]);
|
|
this.refresh();
|
|
return false;
|
|
}
|
|
},
|
|
on_dblclick:{
|
|
webix_table_checkbox: function(){
|
|
return this.on_click.webix_table_checkbox.apply(this,arguments);
|
|
}
|
|
},
|
|
on_context:{
|
|
},
|
|
$init:function(config){
|
|
this.on_click = webix.extend({}, this.on_click);
|
|
var html = "<div class='webix_ss_header'><div class='webix_hs_left'></div><div class='webix_hs_center'></div><div class='webix_hs_right'></div></div><div class='webix_ss_body'><div class='webix_ss_left'><div class='webix_ss_center_scroll'></div></div>";
|
|
html += "<div class='webix_ss_center'><div class='webix_ss_center_scroll'></div></div>";
|
|
html += "<div class='webix_ss_right' ><div class='webix_ss_center_scroll'></div></div></div>";
|
|
html += "<div class='webix_ss_hscroll'></div><div class='webix_ss_footer'><div class='webix_hs_left'></div><div class='webix_hs_center'></div><div class='webix_hs_right'></div></div><div class='webix_ss_vscroll_header'></div><div class='webix_ss_vscroll'></div><div class='webix_ss_vscroll_footer'></div>";
|
|
|
|
this._contentobj.innerHTML = html;
|
|
this._top_id = this._contentobj.id = this.name+webix.uid();
|
|
this._contentobj.className +=" webix_dtable";
|
|
|
|
this._dataobj = this._contentobj;
|
|
|
|
this._header = this._contentobj.firstChild;
|
|
this._body = this._header.nextSibling;
|
|
this._footer = this._body.nextSibling.nextSibling;
|
|
|
|
this.data.provideApi(this, true);
|
|
this.data.attachEvent("onParse", webix.bind(this._call_onparse, this));
|
|
|
|
this.$ready.push(this._first_render);
|
|
|
|
this._columns = [];
|
|
this._headers = [];
|
|
this._footers = [];
|
|
this._rows_cache = [];
|
|
this._active_headers = {};
|
|
this._filter_elements = {};
|
|
this._header_height = this._footer_height = 0;
|
|
|
|
//component can create new view
|
|
this._destroy_with_me = [];
|
|
|
|
this.data.attachEvent("onServerConfig", webix.bind(this._config_table_from_file, this));
|
|
this.data.attachEvent("onServerOptions", webix.bind(this._config_options_from_file, this));
|
|
this.attachEvent("onViewShow", this._restore_scroll_state);
|
|
|
|
webix.callEvent("onDataTable", [this, config]);
|
|
},
|
|
_render_initial:function(){
|
|
this._scrollSizeX = this._scrollSizeY = webix.ui.scrollSize;
|
|
|
|
webix.html.addStyle("#"+this._top_id +" .webix_cell { height:"+this._settings.rowHeight+"px; line-height:"+(this._settings.rowLineHeight || this._settings.rowHeight)+"px;" +(this._settings.fixedRowHeight?"":"white-space:normal;")+" }");
|
|
webix.html.addStyle("#"+this._top_id +" .webix_hcell { height:"+this._settings.headerRowHeight+"px; line-height:"+this._settings.headerRowHeight+"px;}");
|
|
this._render_initial = function(){};
|
|
},
|
|
_first_render:function(){
|
|
this.data.attachEvent("onStoreLoad", webix.bind(this._refresh_any_header_content, this));
|
|
this.data.attachEvent("onSyncApply", webix.bind(this._refresh_any_header_content, this));
|
|
this.data.attachEvent("onStoreUpdated", webix.bind(function(){ return this.render.apply(this, arguments); }, this));
|
|
this.data.attachEvent("onStoreUpdated", webix.bind(this._refresh_tracking_header_content, this));
|
|
this.render();
|
|
},
|
|
refresh:function(){
|
|
this.render();
|
|
},
|
|
render:function(id, data, mode){
|
|
//pure data saving call
|
|
if (mode == "save") return;
|
|
//during dnd we must not repaint anything in mobile webkit
|
|
if (mode == "move"){
|
|
var context = webix.DragControl.getContext();
|
|
if (context && context.fragile) return;
|
|
}
|
|
|
|
if (!this._columns.length){
|
|
var cols = this._settings.columns;
|
|
if (!cols || !cols.length) {
|
|
if (this._settings.autoConfig && this.data.order.length){
|
|
this._dtable_fully_ready = 0;
|
|
this._autoDetectConfig();
|
|
} else
|
|
return;
|
|
}
|
|
this._define_structure();
|
|
}
|
|
|
|
if (!this.isVisible(this._settings.id) || this.$blockRender)
|
|
return this._render_initial(); //Chrome 34, Custom Font loading bug
|
|
|
|
//replace multiple atomic updates by single big repaint
|
|
if (id && data != -1 && (mode == "paint" || mode == "update")){
|
|
if (this._render_timer)
|
|
clearTimeout(this._render_timer);
|
|
|
|
if (!this._render_timer || this._render_timer_id == id){
|
|
this._render_timer_id = id;
|
|
this._render_timer = webix.delay(function(){
|
|
//if only one call - repaint single item
|
|
this.render(id, -1, mode);
|
|
}, this);
|
|
} else {
|
|
this._render_timer_id = null;
|
|
this._render_timer = webix.delay(function(){
|
|
//if ther was a serie of calls - replace them with single full repaint
|
|
this.render();
|
|
}, this);
|
|
}
|
|
return;
|
|
} else if (this._render_timer){
|
|
clearTimeout(this._render_timer);
|
|
this._render_timer = 0;
|
|
}
|
|
|
|
if (this.callEvent("onBeforeRender",[this.data])){
|
|
|
|
this._render_initial();
|
|
if (!this._dtable_fully_ready)
|
|
this._apply_headers();
|
|
|
|
if (this._content_width){
|
|
if (this["_settings"].experimental && (mode == "paint" || mode == "update") && id)
|
|
this._repaint_single_row(id);
|
|
else
|
|
this._check_rendered_cols(true, true);
|
|
}
|
|
|
|
if (!id || mode!="update"){
|
|
this._dtable_height = this._get_total_height();
|
|
this._set_split_sizes_y();
|
|
}
|
|
|
|
this.callEvent("onAfterRender",[this.data]);
|
|
return true;
|
|
}
|
|
},
|
|
getColumnConfig:function(id){
|
|
return this._columns_pull[id] || this._hidden_column_hash[id];
|
|
},
|
|
_config_options_from_file:function(colls){
|
|
for (var key in colls){
|
|
var column = this.getColumnConfig(key);
|
|
webix.assert(column, "Orphan collection: "+key);
|
|
var temp = new webix.DataCollection({
|
|
data:colls[key]
|
|
});
|
|
this._destroy_with_me.push(temp);
|
|
this._bind_collection(temp, column);
|
|
}
|
|
},
|
|
//xml has different configuration structure, fixing
|
|
_config_table_from_file:function(config){
|
|
if (config.columns && this._dtable_fully_ready)
|
|
this.refreshColumns(null, true);
|
|
},
|
|
_define_structure:function(){
|
|
if (this._settings.columns){
|
|
this._columns = this._settings.columns;
|
|
this._columns_pull = {};
|
|
|
|
for (var i = 0; i < this._columns.length; i++){
|
|
var col = this._columns[i];
|
|
this._columns_pull[col.id] = col;
|
|
|
|
var format = col.cssFormat;
|
|
if (format)
|
|
col.cssFormat = webix.toFunctor(format, this.$scope);
|
|
|
|
col.width = col.width||this._settings.columnWidth;
|
|
if (typeof col.format == "string")
|
|
col.format = webix.i18n[col.format]||window[col.format];
|
|
|
|
//default settings for checkboxes and radios
|
|
if (webix.isUndefined(col.checkValue)) col.checkValue = 1;
|
|
if (webix.isUndefined(col.uncheckValue)) col.uncheckValue = 0;
|
|
|
|
if (col.css && typeof col.css == "object")
|
|
col.css = webix.html.createCss(col.css);
|
|
|
|
var template = col.template;
|
|
if (template){
|
|
if (typeof template == "string")
|
|
template = template.replace(/#\$value#/g,"#"+col.id+"#");
|
|
col.template = webix.template(template);
|
|
}
|
|
}
|
|
|
|
this._normalize_headers("header", this._headers);
|
|
this._normalize_headers("footer", this._footers);
|
|
|
|
this.callEvent("onStructureLoad",[]);
|
|
}
|
|
},
|
|
_define_structure_and_render:function(){
|
|
this._apply_headers();
|
|
},
|
|
_apply_headers:function(){
|
|
this._rightSplit = this._columns.length-this._settings.rightSplit;
|
|
this._dtable_width = 0;
|
|
|
|
for (var i = 0; i < this._columns.length; i++){
|
|
if (!this._columns[i].node){
|
|
|
|
var temp = webix.html.create("DIV");
|
|
temp.style.width = this._columns[i].width + "px";
|
|
this._columns[i].node = temp;
|
|
}
|
|
if (i>=this._settings.leftSplit && i<this._rightSplit)
|
|
this._dtable_width += this._columns[i].width;
|
|
}
|
|
|
|
var marks = [];
|
|
|
|
if (this._settings.rightSplit){
|
|
var nr = this._columns.length-this._settings.rightSplit;
|
|
marks[nr] =" webix_first";
|
|
marks[nr-1]=" webix_last";
|
|
}
|
|
if (this._settings.leftSplit){
|
|
var nl = this._settings.leftSplit;
|
|
marks[nl] =" webix_first";
|
|
marks[nl-1]=" webix_last";
|
|
}
|
|
marks[0] = (marks[0]||"")+" webix_first";
|
|
var last_index = this._columns.length-1;
|
|
marks[last_index] = (marks[last_index]||"")+" webix_last";
|
|
|
|
|
|
for (var i=0; i<this._columns.length; i++){
|
|
var node = this._columns[i].node;
|
|
node.setAttribute("column", i);
|
|
node.className = "webix_column "+(this._columns[i].css||"")+(marks[i]||'');
|
|
}
|
|
|
|
this._create_scrolls();
|
|
|
|
this._set_columns_positions();
|
|
this._set_split_sizes_x();
|
|
this._render_header_and_footer();
|
|
|
|
this._dtable_fully_ready = true;
|
|
},
|
|
_set_columns_positions:function(){
|
|
var left = 0;
|
|
for (var i = 0; i < this._columns.length; i++){
|
|
var column = this._columns[i];
|
|
if (i == this._settings.leftSplit || i == this._rightSplit)
|
|
left = 0;
|
|
|
|
if (column.node){
|
|
column.node.style.left = left+"px";
|
|
if (this._settings.leftSplit || this._settings.rightSplit){
|
|
webix.html.remove(column.node);
|
|
column.attached = false;
|
|
}
|
|
}
|
|
left += column.width;
|
|
}
|
|
},
|
|
_render_header_and_footer:function(){
|
|
if (!this._header_fix_width)
|
|
this._header_fix_width = 0;
|
|
|
|
this._header_height = this._footer_height = 0;
|
|
|
|
if (this._settings.header) {
|
|
this._refreshHeaderContent(this._header, 0, 1);
|
|
this._normalize_headers("header", this._headers);
|
|
this._header_height = this._headers._summ;
|
|
this._render_header_section(this._header, "header", this._headers);
|
|
}
|
|
if (this._settings.footer){
|
|
this._refreshHeaderContent(this._footer, 0, 1);
|
|
this._normalize_headers("footer", this._footers);
|
|
this._footer_height = this._footers._summ;
|
|
this._render_header_section(this._footer, "footer", this._footers);
|
|
}
|
|
|
|
this.refreshHeaderContent(false, false);
|
|
this._size_header_footer_fix();
|
|
|
|
if (this._last_sorted)
|
|
this.markSorting(this._last_sorted, this._last_order);
|
|
},
|
|
_normalize_headers:function(collection, heights){
|
|
var rows = 0;
|
|
|
|
for (var i=0; i<this._columns.length; i++){
|
|
var data = this._columns[i][collection];
|
|
if (!data || typeof data != "object" || !data.length){
|
|
if (webix.isUndefined(data)){
|
|
if (collection == "header")
|
|
data = this._columns[i].id;
|
|
else
|
|
data = "";
|
|
}
|
|
data = [data];
|
|
}
|
|
for (var j = 0; j < data.length; j++){
|
|
if (typeof data[j] != "object")
|
|
data[j] = { text:data[j] };
|
|
if (data[j] && data[j].height) heights[j] = data[j].height;
|
|
}
|
|
rows = Math.max(rows, data.length);
|
|
this._columns[i][collection] = data;
|
|
}
|
|
|
|
|
|
heights._summ = rows;
|
|
for (var i = rows-1; i >= 0; i--){
|
|
heights[i] = heights[i] || this._settings.headerRowHeight;
|
|
heights._summ += heights[i]*1;
|
|
}
|
|
|
|
//set null to cells included in col|row spans
|
|
for (var i=0; i<this._columns.length; i++){
|
|
var col = this._columns[i][collection];
|
|
for (var j=0; j<col.length; j++){
|
|
if (col[j] && col[j].rowspan)
|
|
for (var z=1; z<col[j].rowspan; z++)
|
|
col[j+z] = null;
|
|
if (col[j] && col[j].colspan)
|
|
for (var z=1; z<col[j].colspan; z++)
|
|
this._columns[i+z][collection][j] = null;
|
|
}
|
|
}
|
|
|
|
//auto-rowspan cells, which has not enough header lines
|
|
for (var i=0; i<this._columns.length; i++){
|
|
var data = this._columns[i][collection];
|
|
if (data.length < rows){
|
|
var end = data.length-1;
|
|
data[end].rowspan = rows - data.length + 1;
|
|
for (var j=end+1; j<rows; j++)
|
|
data[j]=null;
|
|
}
|
|
}
|
|
return rows;
|
|
},
|
|
_find_header_content:function(sec, id){
|
|
var alltd = sec.getElementsByTagName("TD");
|
|
for (var i = 0; i < alltd.length; i++)
|
|
if (alltd[i].getAttribute("active_id") == id)
|
|
return alltd[i];
|
|
},
|
|
getHeaderContent:function(id){
|
|
var obj = this._find_header_content(this._header, id);
|
|
if (!obj)
|
|
obj = this._find_header_content(this._footer, id);
|
|
|
|
if (obj){
|
|
var config = this._active_headers[id];
|
|
var type = webix.ui.datafilter[config.content];
|
|
|
|
if (type.getHelper) return type.getHelper(obj, config);
|
|
return {
|
|
type: type,
|
|
getValue:function(){ return type.getValue(obj); },
|
|
setValue:function(value){ return type.setValue(obj, value); }
|
|
};
|
|
}
|
|
},
|
|
_summ_next:function(heights, start, i){
|
|
var summ = i ? -1 : 0;
|
|
|
|
i += start;
|
|
for (start; start<i; start++)
|
|
summ+=heights[start] + 1;
|
|
|
|
return summ;
|
|
},
|
|
_render_subheader:function(start, end, width, name, heights){
|
|
if (start == end) return "";
|
|
|
|
var html = "<table style='width:"+width+"px' cellspacing='0' cellpadding='0'>";
|
|
for (var i = start; i < end; i++){
|
|
html += "<tr>";
|
|
for (var i = start; i < end; i++)
|
|
html += "<th style='width:"+this._columns[i].width+"px'></th>";
|
|
html += "</tr>";
|
|
}
|
|
|
|
var count = this._columns[0][name].length;
|
|
var block_evs = [];
|
|
|
|
for (var j = 0; j < count; j++){
|
|
html += "<tr section='"+name+"'>";
|
|
for (var i = start; i < end; i++){
|
|
var header = this._columns[i][name][j];
|
|
if (header === null) continue;
|
|
|
|
if (header.content){
|
|
header.contentId = header.contentId||webix.uid();
|
|
header.columnId = this._columns[i].id;
|
|
header.format = this._columns[i].format;
|
|
|
|
webix.assert(webix.ui.datafilter, "Filtering extension was not included");
|
|
webix.assert(webix.ui.datafilter[header.content], "Unknown content type: "+header.content);
|
|
|
|
header.text = webix.ui.datafilter[header.content].render(this, header);
|
|
this._active_headers[header.contentId] = header;
|
|
this._has_active_headers = true;
|
|
}
|
|
|
|
html += "<td column='"+(header.colspan?(header.colspan-1+i):i)+"'";
|
|
|
|
var hcss = '';
|
|
if (i==start)
|
|
hcss+="webix_first";
|
|
var column_pos = i + (header.colspan?header.colspan-1:0);
|
|
if (column_pos>=end-1)
|
|
hcss+=" webix_last";
|
|
if (hcss)
|
|
html+=' class="'+hcss+'"';
|
|
|
|
var cell_height = heights[j];
|
|
var sheight="";
|
|
if (header.contentId)
|
|
html+=" active_id='"+header.contentId+"'";
|
|
if (header.colspan)
|
|
html+=" colspan='"+header.colspan+"'";
|
|
if (header.rowspan){
|
|
html+=" rowspan='"+header.rowspan+"'";
|
|
cell_height = this._summ_next(this._headers, j, header.rowspan);
|
|
}
|
|
|
|
if (cell_height != this._settings.headerRowHeight)
|
|
sheight =" style='line-height:"+cell_height+"px; height:"+cell_height+"px;'";
|
|
|
|
var css ="webix_hcell";
|
|
var header_css = header.css;
|
|
if (header_css){
|
|
if (typeof header_css == "object")
|
|
header.css = header_css = webix.html.createCss(header_css);
|
|
css+=" "+header_css;
|
|
}
|
|
if (this._columns[i].$selected)
|
|
css += " webix_sel_hcell";
|
|
|
|
html+="><div class='"+css+"'"+sheight+">";
|
|
|
|
var text = (header.text===""?" ":header.text);
|
|
if (header.rotate)
|
|
text = "<div class='webix_rotate' style='width:"+(cell_height-10)+"px; transform-origin:center "+(cell_height-15)/2+"px;-webkit-transform-origin:center "+(cell_height-15)/2+"px;'>"+text+"</div>";
|
|
|
|
html += text + "</div></td>";
|
|
}
|
|
html += "</tr>";
|
|
}
|
|
html+="</tr></table>";
|
|
|
|
return html;
|
|
},
|
|
showItemByIndex:function(row_ind, column_ind){
|
|
var pager = this._settings.pager;
|
|
if (pager){
|
|
var target = Math.floor(row_ind/pager.size);
|
|
if (target != pager.page)
|
|
webix.$$(pager.id).select(target);
|
|
}
|
|
|
|
//parameter will be set to -1, to mark that scroll need not to be adjusted
|
|
if (row_ind != -1){
|
|
var state = this._get_y_range();
|
|
if (row_ind < state[0]+1 || row_ind >= state[1]-1 ){
|
|
//not visible currently
|
|
var summ = this._getHeightByIndexSumm((pager?this.data.$min:0),row_ind);
|
|
if (row_ind < state[0]+1){
|
|
//scroll top - show row at top of screen
|
|
summ = Math.max(0, summ-1);
|
|
} else {
|
|
//scroll bottom - show row at bottom of screen
|
|
summ += this._getHeightByIndex(row_ind) - this._dtable_offset_height;
|
|
//because of row rounding we neet to scroll some extra
|
|
//TODO: create a better heuristic
|
|
if (row_ind>0)
|
|
summ += this._getHeightByIndex(row_ind-1)-1;
|
|
}
|
|
this._y_scroll.scrollTo(summ);
|
|
}
|
|
}
|
|
if (column_ind != -1){
|
|
//ignore split columns - they are always visible
|
|
if (column_ind < this._settings.leftSplit) return;
|
|
if (column_ind >= this._rightSplit) return;
|
|
|
|
//very similar to y-logic above
|
|
var state = this._get_x_range();
|
|
if (column_ind < state[0]+1 || column_ind >= state[1]-1 ){
|
|
//not visible currently
|
|
var summ = 0;
|
|
for (var i=this._settings.leftSplit; i<column_ind; i++)
|
|
summ += this._columns[i].width;
|
|
|
|
/*jsl:ignore*/
|
|
if (column_ind < state[0]+1){
|
|
//scroll to left border
|
|
} else {
|
|
//scroll to right border
|
|
summ += this._columns[column_ind].width - this._center_width;
|
|
}
|
|
/*jsl:end*/
|
|
this._x_scroll.scrollTo(summ);
|
|
}
|
|
}
|
|
},
|
|
showCell:function(row, column){
|
|
if (!column || !row){
|
|
//if column or row not provided - take from current selection
|
|
var t=this.getSelectedId(true);
|
|
if (t.length == 1){
|
|
column = column || t[0].column;
|
|
row = row || t[0].row;
|
|
}
|
|
}
|
|
//convert id to index
|
|
column = column?this.getColumnIndex(column):-1;
|
|
row = row?this.getIndexById(row):-1;
|
|
this.showItemByIndex(row, column);
|
|
|
|
},
|
|
scrollTo:function(x,y){
|
|
if (!this._x_scroll) return;
|
|
if (this._scrollTo_touch)
|
|
return this._scrollTo_touch(x,y);
|
|
|
|
if (x !== null)
|
|
this._x_scroll.scrollTo(x);
|
|
if (y !== null)
|
|
this._y_scroll.scrollTo(y);
|
|
},
|
|
getScrollState:function(){
|
|
if (this._getScrollState_touch)
|
|
return this._getScrollState_touch();
|
|
|
|
var diff = this._render_scroll_shift?0:(this._render_scroll_diff||0);
|
|
return {x:(this._scrollLeft||0), y:(this._scrollTop + diff)};
|
|
},
|
|
showItem:function(id){
|
|
this.showItemByIndex(this.getIndexById(id), -1);
|
|
},
|
|
_render_header_section:function(sec, name, heights){
|
|
sec.childNodes[0].innerHTML = this._render_subheader(0, this._settings.leftSplit, this._left_width, name, heights);
|
|
sec.childNodes[1].innerHTML = this._render_subheader(this._settings.leftSplit, this._rightSplit, this._dtable_width, name, heights);
|
|
sec.childNodes[1].onscroll = webix.bind(this._scroll_with_header, this);
|
|
sec.childNodes[2].innerHTML = this._render_subheader(this._rightSplit, this._columns.length, this._right_width, name, heights);
|
|
},
|
|
_scroll_with_header:function(){
|
|
var active = this.getScrollState().x;
|
|
var header = this._header.childNodes[1].scrollLeft;
|
|
if (header != active)
|
|
this.scrollTo(header, null);
|
|
},
|
|
_refresh_tracking_header_content:function(){
|
|
this.refreshHeaderContent(true, true);
|
|
},
|
|
_refresh_any_header_content:function(){
|
|
this.refreshHeaderContent(false, true);
|
|
},
|
|
//[DEPRECATE] - v3.0, move to private
|
|
refreshHeaderContent:function(trackedOnly, preserve, id){
|
|
if (this._settings.header){
|
|
if (preserve) this._refreshHeaderContent(this._header, trackedOnly, 1, id);
|
|
this._refreshHeaderContent(this._header, trackedOnly, 0, id);
|
|
}
|
|
if (this._settings.footer){
|
|
if (preserve) this._refreshHeaderContent(this._footer, trackedOnly, 1, id);
|
|
this._refreshHeaderContent(this._footer, trackedOnly, 0, id);
|
|
}
|
|
},
|
|
refreshFilter:function(id){
|
|
if (id && !this._active_headers[id]) return;
|
|
this.refreshHeaderContent(false, true, id);
|
|
},
|
|
_refreshHeaderContent:function(sec, cellTrackOnly, getOnly, byId){
|
|
if (this._has_active_headers && sec){
|
|
var alltd = sec.getElementsByTagName("TD");
|
|
|
|
for (var i = 0; i < alltd.length; i++){
|
|
if (alltd[i].getAttribute("active_id")){
|
|
var obj = this._active_headers[alltd[i].getAttribute("active_id")];
|
|
if (byId && byId != obj.columnId) continue;
|
|
|
|
|
|
var content = webix.ui.datafilter[obj.content];
|
|
|
|
if (getOnly){
|
|
if (content.getValue)
|
|
obj.value = content.getValue(alltd[i]);
|
|
} else if (!cellTrackOnly || content.trackCells){
|
|
content.refresh(this, alltd[i], obj);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
headerContent:[],
|
|
_set_size_scroll_area:function(obj, height, hdx){
|
|
if (this._scrollSizeY){
|
|
|
|
obj.style.height = Math.max(height,1)-1+"px";
|
|
obj.style.width = (this._rightSplit?0:hdx)+this._scrollSizeY-1+"px";
|
|
|
|
// temp. fix: Chrome [DIRTY]
|
|
if (webix.env.isWebKit)
|
|
var w = obj.offsetWidth;
|
|
} else
|
|
obj.style.display = "none";
|
|
},
|
|
_size_header_footer_fix:function(){
|
|
if (this._settings.header)
|
|
this._set_size_scroll_area(this._header_scroll, this._header_height, this._header_fix_width);
|
|
if (this._settings.footer)
|
|
this._set_size_scroll_area(this._footer_scroll, this._footer_height, this._header_fix_width);
|
|
},
|
|
_update_scroll:function(x,y){
|
|
var hasX = !(this._settings.autowidth || this._settings.scrollX === false);
|
|
this._scrollSizeX = hasX ? webix.ui.scrollSize : 0;
|
|
var hasY = !(this._settings.autoheight || this._settings.scrollY === false);
|
|
this._scrollSizeY = hasY ? webix.ui.scrollSize : 0;
|
|
if (this._x_scroll){
|
|
this._x_scroll._settings.scrollSize = this._scrollSizeX;
|
|
this._x_scroll._settings.scrollVisible = hasX;
|
|
}
|
|
if (this._y_scroll){
|
|
this._y_scroll._settings.scrollSize = this._scrollSizeY;
|
|
this._y_scroll._settings.scrollVisible = hasY;
|
|
}
|
|
},
|
|
_create_scrolls:function(){
|
|
|
|
this._scrollTop = 0;
|
|
this._scrollLeft = 0;
|
|
var scrx, scry; scrx = scry = 1;
|
|
|
|
if (this._settings.autoheight || this._settings.scrollY === false)
|
|
scry = this._scrollSizeY = 0;
|
|
if (this._settings.autowidth || this._settings.scrollX === false)
|
|
scrx = this._scrollSizeX = 0;
|
|
|
|
if (webix.env.touch) scrx = scry = 0;
|
|
|
|
if (!this._x_scroll){
|
|
this._x_scroll = new webix.ui.vscroll({
|
|
container:this._footer.previousSibling,
|
|
scrollWidth:this._dtable_width,
|
|
scrollSize:this._scrollSizeX,
|
|
scrollVisible:scrx
|
|
});
|
|
|
|
//fix for scroll space on Mac
|
|
if (scrx && !this._scrollSizeX && !webix.env.$customScroll)
|
|
this._x_scroll._viewobj.style.position="absolute";
|
|
|
|
this._x_scroll.attachEvent("onScroll", webix.bind(this._onscroll_x, this));
|
|
}
|
|
|
|
if (!this._y_scroll){
|
|
this._header_scroll = this._footer.nextSibling;
|
|
var vscroll_view = this._header_scroll.nextSibling;
|
|
this._footer_scroll = vscroll_view.nextSibling;
|
|
|
|
this._y_scroll = new webix.ui.vscroll({
|
|
container:vscroll_view,
|
|
scrollHeight:100,
|
|
scroll:"y",
|
|
scrollSize:this._scrollSizeY,
|
|
scrollVisible:scry
|
|
});
|
|
|
|
this._y_scroll.activeArea(this._body);
|
|
this._x_scroll.activeArea(this._body, true);
|
|
this._y_scroll.attachEvent("onScroll", webix.bind(this._onscroll_y, this));
|
|
}
|
|
|
|
if (this._content_width)
|
|
this.callEvent("onResize",[this._content_width, this._content_height]);
|
|
|
|
if (webix.env.$customScroll)
|
|
webix.CustomScroll.enable(this);
|
|
|
|
this._create_scrolls = function(){};
|
|
},
|
|
columnId:function(index){
|
|
return this._columns[index].id;
|
|
},
|
|
getColumnIndex:function(id){
|
|
for (var i = 0; i < this._columns.length; i++)
|
|
if (this._columns[i].id == id)
|
|
return i;
|
|
return -1;
|
|
},
|
|
_getNodeBox:function(rid, cid){
|
|
var xs=0, xe=0, ye=0, ys=0;
|
|
var i; var zone = 0;
|
|
for (i = 0; i < this._columns.length; i++){
|
|
if (this._rightSplit == i || this._settings.leftSplit == i){
|
|
xs=0; zone++;
|
|
}
|
|
if (this._columns[i].id == cid)
|
|
break;
|
|
xs+=this._columns[i].width;
|
|
}
|
|
xe+=this._columns[i].width;
|
|
|
|
for (i = 0; i < this.data.order.length; i++){
|
|
if (this.data.order[i] ==rid)
|
|
break;
|
|
ys+=this._getHeightByIndex(i);
|
|
}
|
|
ye+=this._getHeightByIndex(i);
|
|
return [xs,xe,ys-this._scrollTop,ye, this._body.childNodes[zone]];
|
|
},
|
|
_id_to_string:function(){ return this.row; },
|
|
locate:function(node, idOnly){
|
|
if (this._settings.subview && this != webix.$$(node)) return null;
|
|
|
|
node = node.target||node.srcElement||node;
|
|
while (node && node.getAttribute){
|
|
if (node.getAttribute("view_id"))
|
|
break;
|
|
var cs = webix.html._getClassName(node).toString();
|
|
|
|
var pos = null;
|
|
if (cs.indexOf("webix_cell")!=-1){
|
|
pos = this._locate(node);
|
|
if (pos)
|
|
pos.row = this.data.order[pos.rind];
|
|
}
|
|
if (cs.indexOf("webix_hcell")!=-1){
|
|
pos = this._locate(node);
|
|
if (pos)
|
|
pos.header = true;
|
|
}
|
|
|
|
if (pos){
|
|
if (idOnly) return pos.header ? null : pos.row;
|
|
pos.column = this._columns[pos.cind].id;
|
|
pos.toString = this._id_to_string;
|
|
return pos;
|
|
}
|
|
|
|
node = node.parentNode;
|
|
}
|
|
return null;
|
|
},
|
|
_locate:function(node){
|
|
var cdiv = node.parentNode;
|
|
if (!cdiv) return null;
|
|
var column = (node.getAttribute("column") || cdiv.getAttribute("column"))*1;
|
|
var row = node.getAttribute("row") || 0;
|
|
if (!row)
|
|
for (var i = 0; i < cdiv.childNodes.length; i++)
|
|
if (cdiv.childNodes[i] == node)
|
|
row = i+this._columns[column]._yr0;
|
|
|
|
return { rind:row, cind:column };
|
|
},
|
|
_updateColsSizeSettings:function(silent){
|
|
if (!this._dtable_fully_ready) return;
|
|
|
|
this._set_columns_positions();
|
|
this._set_split_sizes_x();
|
|
this._render_header_and_footer();
|
|
|
|
if (!silent)
|
|
this._check_rendered_cols(false, false);
|
|
},
|
|
setColumnWidth:function(col, width, skip_update){
|
|
return this._setColumnWidth( this.getColumnIndex(col), width, skip_update);
|
|
},
|
|
_setColumnWidth:function(col, width, skip_update, by_user){
|
|
if (isNaN(width)) return;
|
|
var column = this._columns[col];
|
|
|
|
if (column.minWidth && width < column.minWidth)
|
|
width = column.minWidth;
|
|
else if (width<this._settings.minColumnWidth)
|
|
width = this._settings.minColumnWidth;
|
|
|
|
var old = column.width;
|
|
if (old !=width){
|
|
if (col>=this._settings.leftSplit && col<this._rightSplit)
|
|
this._dtable_width += width-old;
|
|
|
|
column.width = width;
|
|
if (column.node) //method can be called from onStructLoad
|
|
column.node.style.width = width+"px";
|
|
else
|
|
return false;
|
|
|
|
if(!skip_update)
|
|
this._updateColsSizeSettings();
|
|
|
|
this.callEvent("onColumnResize", [column.id, width, old, !!by_user]);
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
_getRowHeight:function(row){
|
|
return (row.$height || this._settings.rowHeight)+(row.$subopen?row.$subHeight:0);
|
|
},
|
|
_getHeightByIndex:function(index){
|
|
var id = this.data.order[index];
|
|
if (!id) return this._settings.rowHeight;
|
|
return this._getRowHeight(this.data.pull[id]);
|
|
},
|
|
_getHeightByIndexSumm:function(index1, index2){
|
|
if (this._settings.fixedRowHeight)
|
|
return (index2-index1)*this._settings.rowHeight;
|
|
else {
|
|
var summ = 0;
|
|
for (; index1<index2; index1++)
|
|
summ += this._getHeightByIndex(index1);
|
|
return summ;
|
|
}
|
|
},
|
|
_cellPosition:function(row, column){
|
|
if (arguments.length == 1){
|
|
column = row.column; row = row.row;
|
|
}
|
|
var item = this.getItem(row);
|
|
var config = this.getColumnConfig(column);
|
|
var left = 0;
|
|
var parent = 0;
|
|
|
|
for (var index=0; index < this._columns.length; index++){
|
|
if (index == this._settings.leftSplit || index == this._rightSplit)
|
|
left = 0;
|
|
var leftcolumn = this._columns[index];
|
|
if (leftcolumn.id == column){
|
|
var split_column = index<this._settings.leftSplit ? 0 :( index >= this._rightSplit ? 2 : 1);
|
|
parent = this._body.childNodes[split_column].firstChild;
|
|
break;
|
|
}
|
|
|
|
left += leftcolumn.width;
|
|
}
|
|
|
|
var max = this.data.order.length;
|
|
var top = this._getHeightByIndexSumm((this._render_scroll_top||0), this.getIndexById(row));
|
|
|
|
return {
|
|
parent: parent,
|
|
top: top + (this._render_scroll_shift||0),
|
|
left: left,
|
|
width: config.width,
|
|
height: (item.$height || this._settings.rowHeight)
|
|
};
|
|
},
|
|
_get_total_height:function(){
|
|
var pager = this._settings.pager;
|
|
var start = 0;
|
|
var max = this.data.order.length;
|
|
|
|
if (pager){
|
|
start = pager.size * pager.page;
|
|
max = Math.min(max, start + pager.size);
|
|
if (pager.level){
|
|
start = this.data.$min;
|
|
max = this.data.$max;
|
|
}
|
|
}
|
|
|
|
return this._getHeightByIndexSumm(start, max);
|
|
},
|
|
setRowHeight:function(rowId, height){
|
|
if (isNaN(height)) return;
|
|
if (height<this._settings.minColumnHeight)
|
|
height = this._settings.minColumnHeight;
|
|
|
|
var item = this.getItem(rowId);
|
|
var old_height = item.$height||this._settings.rowHeight;
|
|
|
|
if (old_height != height){
|
|
item.$height = height;
|
|
this.config.fixedRowHeight = false;
|
|
this.render();
|
|
this.callEvent("onRowResize", [rowId, height, old_height]);
|
|
}
|
|
},
|
|
_onscroll_y:function(value){
|
|
this._scrollTop = value;
|
|
if (!this._settings.prerender){
|
|
this._check_rendered_cols();
|
|
}
|
|
else {
|
|
var conts = this._body.childNodes;
|
|
for (var i = 0; i < conts.length; i++){
|
|
conts[i].scrollTop = value;
|
|
}
|
|
}
|
|
|
|
if (webix.env.$customScroll) webix.CustomScroll._update_scroll(this._body);
|
|
this.callEvent("onScrollY",[]);
|
|
this.callEvent("onAfterScroll",[]);
|
|
},
|
|
_onscroll_x:function(value){
|
|
this._body.childNodes[1].scrollLeft = this._scrollLeft = value;
|
|
if (this._settings.header)
|
|
this._header.childNodes[1].scrollLeft = value;
|
|
if (this._settings.footer)
|
|
this._footer.childNodes[1].scrollLeft = value;
|
|
if (this._settings.prerender===false)
|
|
this._check_rendered_cols(this._minimize_dom_changes?false:true);
|
|
|
|
if (webix.env.$customScroll) webix.CustomScroll._update_scroll(this._body);
|
|
this.callEvent("onScrollX",[]);
|
|
this.callEvent("onAfterScroll",[]);
|
|
},
|
|
_get_x_range:function(full){
|
|
if (full) return [0,this._columns.length];
|
|
|
|
var t = this._scrollLeft;
|
|
|
|
var xind = this._settings.leftSplit;
|
|
while (t>0){
|
|
t-=this._columns[xind].width;
|
|
xind++;
|
|
}
|
|
var xend = xind;
|
|
if (t) xind--;
|
|
|
|
t+=this._center_width;
|
|
while (t>0 && xend<this._rightSplit){
|
|
t-=this._columns[xend].width;
|
|
xend++;
|
|
}
|
|
|
|
return [xind, xend];
|
|
},
|
|
getVisibleCount:function(){
|
|
return Math.floor((this._dtable_offset_height) / this.config.rowHeight);
|
|
},
|
|
//returns info about y-scroll position
|
|
_get_y_range:function(full){
|
|
var t = this._scrollTop;
|
|
var start = 0;
|
|
var end = this.count();
|
|
|
|
//apply pager, if defined
|
|
var pager = this._settings.pager;
|
|
if (pager){
|
|
var start = pager.page*pager.size;
|
|
var end = Math.min(end, start+pager.size);
|
|
if (pager.level){
|
|
start = this.data.$min;
|
|
end = this.data.$max;
|
|
}
|
|
}
|
|
|
|
//in case of autoheight - request full rendering
|
|
if (this._settings.autoheight)
|
|
return [start, end, 0];
|
|
|
|
|
|
|
|
|
|
if (full) return [start, end, 0];
|
|
var xind = start;
|
|
var rowHeight = this._settings.fixedRowHeight?this._settings.rowHeight:0;
|
|
if (rowHeight){
|
|
var dep = Math.ceil(t/rowHeight);
|
|
t -= dep*rowHeight;
|
|
xind += dep;
|
|
} else
|
|
while (t>0){
|
|
t-=this._getHeightByIndex(xind);
|
|
xind++;
|
|
}
|
|
|
|
//how much of the first cell is scrolled out
|
|
var xdef = (xind>0 && t)?-(this._getHeightByIndex(xind-1)+t):0;
|
|
var xend = xind;
|
|
if (t) xind--;
|
|
|
|
t+=(this._dtable_offset_height||this._content_height);
|
|
|
|
if (rowHeight){
|
|
var dep = Math.ceil(t/rowHeight);
|
|
t-=dep*rowHeight;
|
|
xend+=dep;
|
|
|
|
if (xend>end)
|
|
xend = end;
|
|
} else
|
|
while (t>0 && xend<end){
|
|
t-=this._getHeightByIndex(xend);
|
|
xend++;
|
|
}
|
|
|
|
return [xind, xend, xdef];
|
|
},
|
|
_repaint_single_row:function(id){
|
|
var item = this.getItem(id);
|
|
var rowindex = this.getIndexById(id);
|
|
|
|
var state = this._get_y_range();
|
|
//row not visible
|
|
if (rowindex < state[0] || rowindex >= state[1]) return;
|
|
|
|
//get visible column
|
|
var x_range = this._get_x_range();
|
|
for (var i=0; i<this._columns.length; i++){
|
|
var column = this._columns[i];
|
|
|
|
//column not visible
|
|
if (i < this._rightSplit && i >= this._settings.leftSplit && ( i<x_range[0] || i > x_range[1]))
|
|
column._yr0 = -999; //ensure that column will not be reused
|
|
|
|
if (column.attached && column.node){
|
|
var node = column.node.childNodes[rowindex-state[0]];
|
|
var value = this._getValue(item, this._columns[i], 0);
|
|
|
|
node.innerHTML = value;
|
|
node.className = this._getCss(this._columns[i], value, item, id);
|
|
}
|
|
}
|
|
},
|
|
_check_rendered_cols:function(x_scroll, force){
|
|
if (!this._columns.length) return;
|
|
|
|
if (force)
|
|
this._clearColumnCache();
|
|
|
|
if (webix.debug_render)
|
|
webix.log("Render: "+this.name+"@"+this._settings.id);
|
|
|
|
|
|
var xr = this._get_x_range(this._settings.prerender);
|
|
var yr = this._get_y_range(this._settings.prerender === true);
|
|
|
|
if (x_scroll){
|
|
for (var i=this._settings.leftSplit; i<xr[0]; i++)
|
|
this._hideColumn(i, force);
|
|
for (var i=xr[1]; i<this._rightSplit; i++)
|
|
this._hideColumn(i, force);
|
|
}
|
|
|
|
this._render_full_rows = [];
|
|
var rendered = 0;
|
|
|
|
for (var i=0; i<this._settings.leftSplit; i++)
|
|
rendered += this._renderColumn(i,yr,force);
|
|
for (var i=xr[0]; i<xr[1]; i++)
|
|
rendered += this._renderColumn(i,yr,force, i == xr[0]);
|
|
for (var i=this._rightSplit; i<this._columns.length; i++)
|
|
rendered += this._renderColumn(i,yr,force);
|
|
|
|
this._check_and_render_full_rows(yr[0], yr[1], force);
|
|
this._check_load_next(yr);
|
|
},
|
|
_delete_full_rows:function(start, end){
|
|
this._rows_cache_start = start;
|
|
this._rows_cache_end = end;
|
|
|
|
webix.html.remove(this._rows_cache);
|
|
this._rows_cache=[];
|
|
},
|
|
_check_and_render_full_rows:function(start, end, force){
|
|
if (this._rows_body)
|
|
this._rows_body.style.top = this._render_scroll_shift+"px";
|
|
|
|
if (!force && start == this._rows_cache_start && end == this._rows_cache_end)
|
|
return;
|
|
|
|
this._delete_full_rows(start, end);
|
|
|
|
if (this._render_full_row_some)
|
|
this._render_full_row_some = false;
|
|
else return;
|
|
|
|
for (var i=0; i<this._render_full_rows.length; i++){
|
|
var info = this._render_full_rows[i];
|
|
var item = this.getItem(info.id);
|
|
|
|
var value;
|
|
if (typeof item.$row == "function"){
|
|
value = item.$row.call(this, item, this.type);
|
|
} else {
|
|
value = this._getValue(item, this.getColumnConfig(item.$row), i);
|
|
}
|
|
|
|
var row = this._rows_cache[i] = webix.html.create("DIV", null , value);
|
|
row.className = "webix_cell "+(item.$sub ? ("webix_dtable_sub"+(this._settings.subview?"view":"row")) : "webix_dtable_colrow");
|
|
row.setAttribute("column", 0);
|
|
row.setAttribute("row", info.index);
|
|
|
|
var height = (item.$height || this._settings.rowHeight);
|
|
if (item.$subopen)
|
|
row.style.height = item.$subHeight+"px";
|
|
else
|
|
row.style.height = height +"px";
|
|
|
|
row.style.paddingRight = webix.ui.scrollSize+"px";
|
|
row.style.top = info.top + (item.$subopen ? height-1 : -1) + "px";
|
|
|
|
if (!this._rows_body){
|
|
this._rows_body = webix.html.create("DIV");
|
|
this._rows_body.style.position = "relative";
|
|
this._rows_body.style.top = this._render_scroll_shift+"px";
|
|
this._body.appendChild(this._rows_body);
|
|
}
|
|
this._rows_body.appendChild(row);
|
|
this.attachEvent("onSyncScroll", function(x,y,t){
|
|
webix.Touch._set_matrix(this._rows_body,0,y,t);
|
|
});
|
|
if (this._settings.subview)
|
|
this.callEvent("onSubViewRender", [item, row]);
|
|
}
|
|
},
|
|
_check_load_next:function(yr){
|
|
var paging = this._settings.pager;
|
|
var fetch = this._settings.datafetch;
|
|
|
|
var direction = (!this._last_valid_render_pos || yr[0] >= this._last_valid_render_pos);
|
|
this._last_valid_render_pos = yr[0];
|
|
|
|
if (this._data_request_flag){
|
|
if (paging && (!fetch || fetch >= paging.size))
|
|
if (this._check_rows([0,paging.size*paging.page], Math.max(fetch, paging.size), true))
|
|
return (this._data_request_flag = null);
|
|
|
|
this._run_load_next(this._data_request_flag, direction);
|
|
this._data_request_flag = null;
|
|
} else {
|
|
if (this._settings.loadahead)
|
|
var check = this._check_rows(yr, this._settings.loadahead, direction);
|
|
}
|
|
},
|
|
_check_rows:function(view, count, dir){
|
|
var start = view[1];
|
|
var end = start+count;
|
|
if (!dir){
|
|
start = view[0]-count;
|
|
end = view[0];
|
|
}
|
|
|
|
if (start<0) start = 0;
|
|
end = Math.min(end, this.data.order.length-1);
|
|
|
|
var result = false;
|
|
for (var i=start; i<end; i++)
|
|
if (!this.data.order[i]){
|
|
if (!result)
|
|
result = { start:i, count:(end-start) };
|
|
else {
|
|
result.last = i;
|
|
result.count = (i-start);
|
|
}
|
|
}
|
|
if (result){
|
|
this._run_load_next(result, dir);
|
|
return true;
|
|
}
|
|
},
|
|
_run_load_next:function(conf, direction){
|
|
var count = Math.max(conf.count, (this._settings.datafetch||this._settings.loadahead||0));
|
|
var start = direction?conf.start:(conf.last - count+1);
|
|
|
|
if (this._maybe_loading_already(conf.count, conf.start)) return;
|
|
this.loadNext(count, start);
|
|
},
|
|
// necessary for safari only
|
|
_preserveScrollTarget: function(columnNode){
|
|
if (webix.env.isSafari){
|
|
var i, node, newNode, scroll,
|
|
dir = ["x","y"];
|
|
|
|
for(i = 0; i < 2; i++){
|
|
scroll = this["_"+dir[i]+"_scroll"];
|
|
if(scroll && scroll._scroll_trg && scroll._scroll_trg.parentNode == columnNode){
|
|
node = scroll._scroll_trg;
|
|
}
|
|
}
|
|
|
|
if(node){
|
|
if(this._scrollWheelTrg)
|
|
webix.html.remove(this._scrollWheelTrg);
|
|
this._scrollWheelTrg = node;
|
|
newNode = node.cloneNode(true); // required for _hideColumn
|
|
node.parentNode.insertBefore(newNode, node);
|
|
this._scrollWheelTrg.style.display = "none";
|
|
this._body.appendChild(this._scrollWheelTrg);
|
|
}
|
|
}
|
|
},
|
|
_hideColumn:function(index){
|
|
var col = this._columns[index];
|
|
|
|
// preserve target node for Safari wheel event
|
|
this._preserveScrollTarget(col.node);
|
|
webix.html.remove(col.node);
|
|
col.attached = false;
|
|
},
|
|
_clearColumnCache:function(){
|
|
for (var i = 0; i < this._columns.length; i++)
|
|
this._columns[i]._yr0 = -1;
|
|
|
|
if (this._rows_cache.length){
|
|
webix.html.remove(this._rows_cache);
|
|
this._rows_cache = [];
|
|
}
|
|
},
|
|
getText:function(row_id, column_id){
|
|
return this._getValue(this.getItem(row_id), this.getColumnConfig(column_id), 0);
|
|
},
|
|
_getCss:function(config, value, item, id){
|
|
var css = "webix_cell";
|
|
|
|
if (config.cssFormat){
|
|
var per_css = config.cssFormat(value, item, id, config.id);
|
|
if (per_css){
|
|
if (typeof per_css == "object")
|
|
css+= " "+webix.html.createCss(per_css);
|
|
else
|
|
css+=" "+per_css;
|
|
}
|
|
}
|
|
|
|
var row_css = item.$css;
|
|
if (row_css){
|
|
if (typeof row_css == "object")
|
|
item.$css = row_css = webix.html.createCss(row_css);
|
|
css+=" "+row_css;
|
|
}
|
|
|
|
var mark = this.data._marks[id];
|
|
if (mark){
|
|
if (mark.$css)
|
|
css+=" "+mark.$css;
|
|
if (mark.$cellCss){
|
|
var mark_marker = mark.$cellCss[config.id];
|
|
if (mark_marker)
|
|
css+=" "+mark_marker;
|
|
}
|
|
}
|
|
|
|
if (item.$cellCss){
|
|
var css_marker = item.$cellCss[config.id];
|
|
if (css_marker){
|
|
if (typeof css_marker == "object")
|
|
css_marker = webix.html.createCss(css_marker);
|
|
css += " "+css_marker;
|
|
}
|
|
}
|
|
|
|
//cell-selection
|
|
var selected = this.data.getMark(item.id,"webix_selected");
|
|
if ((selected && (selected.$row || selected[config.id]))||config.$selected) css+=this._select_css;
|
|
|
|
return css;
|
|
},
|
|
_getValue:function(item, config, i){
|
|
if (!item)
|
|
return "";
|
|
|
|
var value;
|
|
|
|
value = item[config.id];
|
|
if (value === webix.undefined || value === null)
|
|
value = "";
|
|
else if (config.format)
|
|
value = config.format(value);
|
|
if (config.template)
|
|
value = config.template(item, this.type, value, config, i);
|
|
|
|
return value;
|
|
},
|
|
//we don't use render-stack, but still need a place for common helpers
|
|
//so creating a simple "type" holder
|
|
type:{
|
|
checkbox:function(obj, common, value, config){
|
|
var checked = (value == config.checkValue) ? 'checked="true"' : '';
|
|
return "<input class='webix_table_checkbox' type='checkbox' "+checked+">";
|
|
},
|
|
radio:function(obj, common, value, config){
|
|
var checked = (value == config.checkValue) ? 'checked="true"' : '';
|
|
return "<input class='webix_table_radio' type='radio' "+checked+">";
|
|
},
|
|
editIcon:function(){
|
|
return "<span class='webix_icon fa-pencil'></span>";
|
|
},
|
|
trashIcon:function(){
|
|
return "<span class='webix_icon fa-trash'></span>";
|
|
}
|
|
},
|
|
type_setter:function(value){
|
|
if(!this.types || !this.types[value])
|
|
webix.type(this, value);
|
|
else {
|
|
this.type = webix.clone(this.types[value]);
|
|
if (this.type.css)
|
|
this._contentobj.className+=" "+this.type.css;
|
|
}
|
|
if (this.type.on_click)
|
|
webix.extend(this.on_click, this.type.on_click);
|
|
|
|
return value;
|
|
},
|
|
_renderColumn:function(index,yr,force, single){
|
|
var col = this._columns[index];
|
|
if (!col.attached){
|
|
var split_column = index<this._settings.leftSplit ? 0 :( index >= this._rightSplit ? 2 : 1);
|
|
this._body.childNodes[split_column].firstChild.appendChild(col.node);
|
|
col.attached = true;
|
|
col.split = split_column;
|
|
}
|
|
|
|
this._render_scroll_top = yr[0];
|
|
this._render_scroll_shift = 0;
|
|
this._render_scroll_diff = yr[2];
|
|
|
|
//if columns not aligned during scroll - set correct scroll top value for each column
|
|
var total = 0;
|
|
if (this._settings.scrollAlignY){
|
|
if ((yr[1] == this.data.order.length) || (this.data.$pagesize && yr[1] % this.data.$pagesize === 0 )){
|
|
col.node.style.top = (this._render_scroll_shift = yr[2])+"px";
|
|
} else if (col._yr2)
|
|
col.node.style.top = "0px";
|
|
} else {
|
|
this._render_scroll_shift = yr[2];
|
|
if (yr[2] != col._yr2){
|
|
col.node.style.top = yr[2]+"px";
|
|
}
|
|
}
|
|
|
|
if (!force && (col._yr0 == yr[0] && col._yr1 == yr[1])) return 0;
|
|
|
|
var html="";
|
|
var config = this._settings.columns[index];
|
|
var rowHeight = this._settings.rowHeight;
|
|
|
|
|
|
for (var i = yr[0]; i < yr[1]; i++){
|
|
var id = this.data.order[i];
|
|
var item = this.data.getItem(id);
|
|
var value;
|
|
if (item){
|
|
if (single && item.$row){
|
|
this._render_full_row_some = true;
|
|
this._render_full_rows.push({ top:total, id:item.id, index:i});
|
|
if (!item.$sub){
|
|
html+="<div class='webix_cell'></div>";
|
|
total += rowHeight;
|
|
continue;
|
|
}
|
|
}
|
|
var value = this._getValue(item, config, i);
|
|
var css = this._getCss(config, value, item, id);
|
|
|
|
var margin = item.$subopen ? "margin-bottom:"+item.$subHeight+"px;" : "";
|
|
if (item.$height){
|
|
html+="<div class='"+css+"' style='height:"+item.$height+"px;"+margin+"'>"+value+"</div>";
|
|
total += item.$height - rowHeight;
|
|
} else {
|
|
html+="<div class='"+css+"'"+(margin?" style='"+margin+"'":"")+">"+value+"</div>";
|
|
}
|
|
|
|
if (margin)
|
|
total += item.$subHeight;
|
|
|
|
} else {
|
|
html+="<div class='webix_cell'></div>";
|
|
if (!this._data_request_flag)
|
|
this._data_request_flag = {start:i, count:yr[1]-i};
|
|
else
|
|
this._data_request_flag.last = i;
|
|
}
|
|
total += rowHeight;
|
|
}
|
|
|
|
// preserve target node for Safari wheel event
|
|
this._preserveScrollTarget(col.node);
|
|
|
|
col.node.innerHTML = html;
|
|
col._yr0=yr[0];
|
|
col._yr1=yr[1];
|
|
col._yr2=yr[2];
|
|
return 1;
|
|
},
|
|
_set_split_sizes_y:function(){
|
|
if (!this._columns.length || isNaN(this._content_height*1)) return;
|
|
webix.debug_size_box(this, ["y-sizing"], true);
|
|
|
|
var wanted_height = this._dtable_height+(this._scrollSizeX?this._scrollSizeX:0);
|
|
if ((this._settings.autoheight || this._settings.yCount) && this.resize())
|
|
return;
|
|
|
|
this._y_scroll.sizeTo(this._content_height, this._header_height, this._footer_height);
|
|
this._y_scroll.define("scrollHeight", wanted_height);
|
|
|
|
this._dtable_offset_height = Math.max(0,this._content_height-this._scrollSizeX-this._header_height-this._footer_height);
|
|
for (var i = 0; i < 3; i++){
|
|
|
|
this._body.childNodes[i].style.height = this._dtable_offset_height+"px";
|
|
if (this._settings.prerender)
|
|
this._body.childNodes[i].firstChild.style.height = this._dtable_height+"px";
|
|
else
|
|
this._body.childNodes[i].firstChild.style.height = this._dtable_offset_height+"px";
|
|
}
|
|
//prevent float overflow, when we have split and very small
|
|
this._header.style.height = this._header_height+"px";
|
|
},
|
|
_set_split_sizes_x:function(){
|
|
if (!this._columns.length) return;
|
|
if (webix.debug_size) webix.log(" - "+this.name+"@"+this._settings.id+" X sizing");
|
|
|
|
var index = 0;
|
|
this._left_width = 0;
|
|
this._right_width = 0;
|
|
this._center_width = 0;
|
|
|
|
while (index<this._settings.leftSplit){
|
|
this._left_width += this._columns[index].width;
|
|
index++;
|
|
}
|
|
|
|
index = this._columns.length-1;
|
|
|
|
while (index>=this._rightSplit){
|
|
this._right_width += this._columns[index].width;
|
|
index--;
|
|
}
|
|
|
|
if (!this._content_width) return;
|
|
|
|
if (this._settings.autowidth && this.resize())
|
|
return;
|
|
|
|
this._center_width = this._content_width - this._right_width - this._left_width - this._scrollSizeY;
|
|
|
|
this._body.childNodes[1].firstChild.style.width = this._dtable_width+"px";
|
|
|
|
this._body.childNodes[0].style.width = this._left_width+"px";
|
|
this._body.childNodes[1].style.width = this._center_width+"px";
|
|
this._body.childNodes[2].style.width = this._right_width+"px";
|
|
this._header.childNodes[0].style.width = this._left_width+"px";
|
|
this._header.childNodes[1].style.width = this._center_width+"px";
|
|
this._header.childNodes[2].style.width = this._right_width+"px";
|
|
this._footer.childNodes[0].style.width = this._left_width+"px";
|
|
this._footer.childNodes[1].style.width = this._center_width+"px";
|
|
this._footer.childNodes[2].style.width = this._right_width+"px";
|
|
|
|
var delta = this._center_width - this._dtable_width;
|
|
if (delta<0) delta=0; //negative header space has not sense
|
|
|
|
if (delta != this._header_fix_width){
|
|
this._header_fix_width = delta;
|
|
this._size_header_footer_fix();
|
|
}
|
|
|
|
// temp. fix: Chrome [DIRTY]
|
|
if (webix.env.isWebKit){
|
|
var w = this._body.childNodes[0].offsetWidth;
|
|
w = this._body.childNodes[1].offsetWidth;
|
|
w = this._body.childNodes[1].firstChild.offsetWidth;
|
|
w = this._body.childNodes[2].offsetWidth;
|
|
}
|
|
|
|
this._x_scroll.sizeTo(this._content_width-this._scrollSizeY);
|
|
this._x_scroll.define("scrollWidth", this._dtable_width+this._left_width+this._right_width);
|
|
},
|
|
$getSize:function(dx, dy){
|
|
if ((this._settings.autoheight || this._settings.yCount) && this._settings.columns){
|
|
//if limit set - use it
|
|
var desired = ((this._settings.yCount || 0) * this._settings.rowHeight);
|
|
//else try to use actual rendered size
|
|
//if component invisible - this is not valid, so fallback to all rows
|
|
if (!desired) desired = this.isVisible() ? this._dtable_height : (this.count() * this._settings.rowHeight);
|
|
//add scroll and check minHeight limit
|
|
this._settings.height = Math.max(desired+(this._scrollSizeX?this._scrollSizeX:0)-1, (this._settings.minHeight||0))+this._header_height+this._footer_height;
|
|
}
|
|
if (this._settings.autowidth && this._settings.columns)
|
|
this._settings.width = Math.max(this._dtable_width+this._left_width+this._right_width+this._scrollSizeY,(this._settings.minWidth||0));
|
|
|
|
|
|
var minwidth = this._left_width+this._right_width+this._scrollSizeY;
|
|
var sizes = webix.ui.view.prototype.$getSize.call(this, dx, dy);
|
|
|
|
|
|
sizes[0] = Math.max(sizes[0]||minwidth);
|
|
return sizes;
|
|
},
|
|
_restore_scroll_state:function(){
|
|
if (this._x_scroll){
|
|
var state = this.getScrollState();
|
|
this._x_scroll._last_scroll_pos = this._y_scroll._last_scroll_pos = -1;
|
|
this.scrollTo(state.x, state.y);
|
|
}
|
|
},
|
|
$setSize:function(x,y){
|
|
var oldw = this._content_width;
|
|
var oldh = this._content_height;
|
|
|
|
if (webix.ui.view.prototype.$setSize.apply(this, arguments)){
|
|
if (this._dtable_fully_ready){
|
|
this.callEvent("onResize",[this._content_width, this._content_height, oldw, oldh]);
|
|
this._set_split_sizes_x();
|
|
this._set_split_sizes_y();
|
|
}
|
|
this.render();
|
|
}
|
|
},
|
|
_on_header_click:function(column){
|
|
var col = this.getColumnConfig(column);
|
|
if (!col.sort) return;
|
|
|
|
var order = 'asc';
|
|
if (col.id == this._last_sorted)
|
|
order = this._last_order == "asc" ? "desc" : "asc";
|
|
|
|
this._sort(col.id, order, col.sort);
|
|
},
|
|
markSorting:function(column, order){
|
|
if (!this._sort_sign)
|
|
this._sort_sign = webix.html.create("DIV");
|
|
webix.html.remove(this._sort_sign);
|
|
|
|
if (order){
|
|
var cell = this._get_header_cell(this.getColumnIndex(column));
|
|
if (cell){
|
|
this._sort_sign.className = "webix_ss_sort_"+order;
|
|
cell.style.position = "relative";
|
|
cell.appendChild(this._sort_sign);
|
|
}
|
|
|
|
this._last_sorted = column;
|
|
this._last_order = order;
|
|
} else {
|
|
this._last_sorted = this._last_order = null;
|
|
}
|
|
},
|
|
scroll_setter:function(mode){
|
|
if (typeof mode == "string"){
|
|
this._settings.scrollX = (mode.indexOf("x") != -1);
|
|
this._settings.scrollY = (mode.indexOf("y") != -1);
|
|
return mode;
|
|
} else
|
|
return (this._settings.scrollX = this._settings.scrollY = mode);
|
|
},
|
|
_get_header_cell:function(column){
|
|
var cells = this._header.getElementsByTagName("TD");
|
|
var maybe = null;
|
|
for (var i = 0; i<cells.length; i++)
|
|
if (cells[i].getAttribute("column") == column && !cells[i].getAttribute("active_id")){
|
|
maybe = cells[i].firstChild;
|
|
if ((cells[i].colSpan||0) < 2) return maybe;
|
|
}
|
|
return maybe;
|
|
},
|
|
_sort:function(col_id, direction, type){
|
|
direction = direction || "asc";
|
|
this.markSorting(col_id, direction);
|
|
|
|
if (type == "server"){
|
|
this.loadNext(0, 0, {
|
|
"before":function(){
|
|
var url = this.data.url;
|
|
this.clearAll();
|
|
this.data.url = url;
|
|
}
|
|
}, 0, 1);
|
|
} else {
|
|
if (type == "text"){
|
|
this.data.each(function(obj){ obj.$text = this.getText(obj.id, col_id); }, this);
|
|
type="string"; col_id = "$text";
|
|
}
|
|
|
|
if (typeof type == "function")
|
|
this.data.sort(type, direction);
|
|
else
|
|
this.data.sort(col_id, direction, type || "string");
|
|
}
|
|
},
|
|
_mouseEventCall: function( css_call, e, id, trg ) {
|
|
var functor, i, res;
|
|
if (css_call.length){
|
|
for ( i = 0; i < css_call.length; i++) {
|
|
functor = webix.toFunctor(css_call[i], this.$scope);
|
|
res = functor.call(this,e,id,trg);
|
|
if (res===false) return false;
|
|
}
|
|
}
|
|
},
|
|
//because we using non-standard rendering model, custom logic for mouse detection need to be used
|
|
_mouseEvent:function(e,hash,name,pair){
|
|
e=e||event;
|
|
var trg=e.target||e.srcElement;
|
|
if (this._settings.subview && this != webix.$$(trg)) return;
|
|
|
|
//define some vars, which will be used below
|
|
var css = '',
|
|
css_call = [],
|
|
found = false,
|
|
id = null,
|
|
res,
|
|
trg=e.target||e.srcElement;
|
|
|
|
//loop through all parents
|
|
while (trg && trg.parentNode && trg != this._viewobj.parentNode){
|
|
var trgCss = webix.html._getClassName(trg);
|
|
if ((css = trgCss)) {
|
|
css = css.toString().split(" ");
|
|
|
|
for (var i = css.length - 1; i >= 0; i--)
|
|
if (hash[css[i]])
|
|
css_call.push(hash[css[i]]);
|
|
}
|
|
|
|
if (trg.parentNode.getAttribute && !id){
|
|
var column = trg.parentNode.getAttribute("column") || trg.getAttribute("column");
|
|
if (column){ //we need to ignore TD - which is header|footer
|
|
var isBody = trg.parentNode.tagName == "DIV";
|
|
|
|
//column already hidden or removed
|
|
if(!this._columns[column]) return;
|
|
|
|
found = true;
|
|
if (isBody){
|
|
var index = trg.parentNode.getAttribute("row") || trg.getAttribute("row") || ( webix.html.index(trg) + this._columns[column]._yr0 );
|
|
this._item_clicked = id = { row:this.data.order[index], column:this._columns[column].id};
|
|
id.toString = this._id_to_string;
|
|
} else
|
|
this._item_clicked = id = { column:this._columns[column].id };
|
|
|
|
//some custom css handlers was found
|
|
res = this._mouseEventCall(css_call, e, id, trg);
|
|
if (res===false) return;
|
|
|
|
//call inner handler
|
|
if (isBody ){
|
|
if(this.callEvent("on"+name,[id,e,trg])&&pair){
|
|
this.callEvent("on"+pair,[id,e,trg]);
|
|
}
|
|
}
|
|
else if (name == "ItemClick"){
|
|
var isHeader = (trg.parentNode.parentNode.getAttribute("section") == "header");
|
|
if (isHeader && this.callEvent("onHeaderClick", [id, e, trg]))
|
|
this._on_header_click(id.column);
|
|
}
|
|
css_call = [];
|
|
}
|
|
}
|
|
|
|
trg=trg.parentNode;
|
|
}
|
|
this._mouseEventCall(css_call, e, id, this.$view);
|
|
return found; //returns true if item was located and event was triggered
|
|
},
|
|
|
|
|
|
|
|
|
|
showOverlay:function(message){
|
|
if (!this._datatable_overlay){
|
|
var t = webix.html.create("DIV", { "class":"webix_overlay" }, "");
|
|
this._body.appendChild(t);
|
|
this._datatable_overlay = t;
|
|
}
|
|
this._datatable_overlay.innerHTML = message;
|
|
},
|
|
hideOverlay:function(){
|
|
if (this._datatable_overlay){
|
|
webix.html.remove(this._datatable_overlay);
|
|
this._datatable_overlay = null;
|
|
}
|
|
},
|
|
mapCells: function(startrow, startcol, numrows, numcols, callback, getOnly) {
|
|
if (startrow === null && this.data.order.length > 0) startrow = this.data.order[0];
|
|
if (startcol === null) startcol = this.columnId(0);
|
|
if (numrows === null) numrows = this.data.order.length;
|
|
if (numcols === null) numcols = this._settings.columns.length;
|
|
|
|
if (!this.exists(startrow)) return;
|
|
startrow = this.getIndexById(startrow);
|
|
startcol = this.getColumnIndex(startcol);
|
|
if (startcol === null) return;
|
|
|
|
for (var i = 0; i < numrows && (startrow + i) < this.data.order.length; i++) {
|
|
var row_ind = startrow + i;
|
|
var row_id = this.data.order[row_ind];
|
|
var item = this.getItem(row_id);
|
|
for (var j = 0; j < numcols && (startcol + j) < this._settings.columns.length; j++) {
|
|
var col_ind = startcol + j;
|
|
var col_id = this.columnId(col_ind);
|
|
var result = callback(item[col_id], row_id, col_id, i, j);
|
|
if (!getOnly)
|
|
item[col_id] = result;
|
|
}
|
|
}
|
|
},
|
|
_call_onparse: function(driver, data){
|
|
if (!this._settings.columns && driver.getConfig)
|
|
this.define("columns", driver.getConfig(data));
|
|
},
|
|
_autoDetectConfig:function(){
|
|
var test = this.getItem(this.getFirstId());
|
|
var res = this._settings.columns = [];
|
|
for (var key in test)
|
|
if (key != "id")
|
|
res.push({ id:key, header:key[0].toUpperCase()+key.substr(1), sort:"string", editor:"text" });
|
|
if (res.length)
|
|
res[0].fillspace = true;
|
|
if (typeof this._settings.select == "undefined")
|
|
this.define("select", "row");
|
|
}
|
|
},webix.AutoTooltip, webix.Group, webix.DataMarks, webix.DataLoader, webix.MouseEvents, webix.MapCollection, webix.ui.view, webix.EventSystem, webix.Settings);
|
|
|
|
webix.ui.datafilter = {
|
|
textWaitDelay:500,
|
|
"summColumn":{
|
|
getValue:function(node){ return node.firstChild.innerHTML; },
|
|
setValue: function(){},
|
|
refresh:function(master, node, value){
|
|
var result = 0;
|
|
master.mapCells(null, value.columnId, null, 1, function(value){
|
|
value = value*1;
|
|
if (!isNaN(value))
|
|
result+=value;
|
|
}, true);
|
|
|
|
if (value.format)
|
|
result = value.format(result);
|
|
if (value.template)
|
|
result = value.template({value:result});
|
|
|
|
node.firstChild.innerHTML = result;
|
|
},
|
|
trackCells:true,
|
|
render:function(master, config){
|
|
if (config.template)
|
|
config.template = webix.template(config.template);
|
|
return "";
|
|
}
|
|
},
|
|
"masterCheckbox":{
|
|
getValue:function(){},
|
|
setValue:function(){},
|
|
getHelper:function(node, config){
|
|
return {
|
|
check:function(){ config.checked = false; node.onclick(); },
|
|
uncheck:function(){ config.checked = true; node.onclick(); },
|
|
isChecked:function(){ return config.checked; }
|
|
};
|
|
},
|
|
refresh:function(master, node, config){
|
|
node.onclick = function(){
|
|
this.getElementsByTagName("input")[0].checked = config.checked = !config.checked;
|
|
var column = master.getColumnConfig(config.columnId);
|
|
var checked = config.checked ? column.checkValue : column.uncheckValue;
|
|
master.data.each(function(obj){
|
|
if(obj){ //dyn loading
|
|
obj[config.columnId] = checked;
|
|
master.callEvent("onCheck", [obj.id, config.columnId, checked]);
|
|
this.callEvent("onStoreUpdated", [obj.id, obj, "save"]);
|
|
}
|
|
});
|
|
master.refresh();
|
|
};
|
|
},
|
|
render:function(master, config){
|
|
return "<input type='checkbox' "+(config.checked?"checked='1'":"")+">";
|
|
}
|
|
},
|
|
"textFilter":{
|
|
getInputNode:function(node){ return node.firstChild.firstChild; },
|
|
getValue:function(node){ return this.getInputNode(node).value; },
|
|
setValue:function(node, value){ this.getInputNode(node).value=value; },
|
|
refresh:function(master, node, value){
|
|
node.component = master._settings.id;
|
|
master.registerFilter(node, value, this);
|
|
node._comp_id = master._settings.id;
|
|
if (value.value && this.getValue(node) != value.value) this.setValue(node, value.value);
|
|
node.onclick = webix.html.preventEvent;
|
|
var evId = "webix_keydown_filter_"+master._settings.id+"_"+value.columnId;
|
|
webix.event(node, "keydown", this._on_key_down, {id: evId});
|
|
},
|
|
render:function(master, config){
|
|
if (this.init) this.init(config);
|
|
config.css = "webix_ss_filter";
|
|
return "<input "+(config.placeholder?('placeholder="'+config.placeholder+'" '):"")+"type='text'>";
|
|
},
|
|
_on_key_down:function(e, node, value){
|
|
var id = this._comp_id;
|
|
|
|
//tabbing through filters must not trigger filtering
|
|
//we can improve this functionality by preserving initial filter value
|
|
//and comparing new one with it
|
|
if ((e.which || e.keyCode) == 9) return;
|
|
|
|
if (this._filter_timer) window.clearTimeout(this._filter_timer);
|
|
this._filter_timer=window.setTimeout(function(){
|
|
webix.$$(id).filterByAll();
|
|
},webix.ui.datafilter.textWaitDelay);
|
|
}
|
|
},
|
|
"selectFilter":{
|
|
getInputNode:function(node){ return node.firstChild.firstChild; },
|
|
getValue:function(node){ return this.getInputNode(node).value; },
|
|
setValue:function(node, value){ this.getInputNode(node).value=value; },
|
|
refresh:function(master, node, value){
|
|
//value - config from header { contet: }
|
|
value.compare = value.compare || function(a,b){ return a == b; };
|
|
|
|
node.component = master._settings.id;
|
|
master.registerFilter(node, value, this);
|
|
|
|
var data;
|
|
var options = value.options;
|
|
if (options){
|
|
if(typeof options =="string"){
|
|
data = value.options = [];
|
|
webix.ajax(options).then(webix.bind(function(data){
|
|
value.options = data.json();
|
|
this.refresh(master, node, value);
|
|
}, this));
|
|
} else
|
|
data = options;
|
|
}
|
|
else{
|
|
data = master.collectValues(value.columnId);
|
|
data.unshift({ id:"", value:"" });
|
|
}
|
|
|
|
var optview = webix.$$(options);
|
|
if(optview && optview.data && optview.data.getRange){
|
|
data = optview.data.getRange();
|
|
}
|
|
//slow in IE
|
|
//http://jsperf.com/select-options-vs-innerhtml
|
|
|
|
var select = document.createElement("select");
|
|
for (var i = 0; i < data.length; i++){
|
|
var option = document.createElement("option");
|
|
option.value = data[i].id;
|
|
option.text = data[i].value;
|
|
select.add(option);
|
|
}
|
|
|
|
node.firstChild.innerHTML = "";
|
|
node.firstChild.appendChild(select);
|
|
|
|
if (value.value) this.setValue(node, value.value);
|
|
node.onclick = webix.html.preventEvent;
|
|
|
|
select._comp_id = master._settings.id;
|
|
var evId = "webix_change_filter_"+master._settings.id+"_"+value.columnId;
|
|
webix.event(select, "change", this._on_change, {id: evId});
|
|
},
|
|
render:function(master, config){
|
|
if (this.init) this.$init(config);
|
|
config.css = "webix_ss_filter"; return ""; },
|
|
_on_change:function(e, node, value){
|
|
webix.$$(this._comp_id).filterByAll();
|
|
}
|
|
}
|
|
};
|
|
|
|
webix.ui.datafilter.serverFilter = webix.extend({
|
|
$server: true,
|
|
_on_key_down:function(e, node, value){
|
|
var config, name,
|
|
id = this._comp_id,
|
|
code = (e.which || e.keyCode);
|
|
|
|
node = e.target || e.srcElement;
|
|
//ignore tab and navigation keys
|
|
if (code == 9 || ( code >= 33 && code <= 40)) return;
|
|
if (this._filter_timer) window.clearTimeout(this._filter_timer);
|
|
this._filter_timer=window.setTimeout(function(){
|
|
webix.$$(id).filterByAll();
|
|
},webix.ui.datafilter.textWaitDelay);
|
|
}
|
|
}, webix.ui.datafilter.textFilter);
|
|
|
|
webix.ui.datafilter.serverSelectFilter = webix.extend({
|
|
$server: true,
|
|
_on_change:function(e, node, value){
|
|
var id = this._comp_id;
|
|
webix.$$(id).filterByAll();
|
|
}
|
|
}, webix.ui.datafilter.selectFilter);
|
|
|
|
webix.ui.datafilter.numberFilter = webix.extend({
|
|
init:function(config){
|
|
config.prepare = function(value, filter){
|
|
var equality = (value.indexOf("=") != -1)?1:0;
|
|
var intvalue = this.format(value);
|
|
if (intvalue === "") return "";
|
|
|
|
if (value.indexOf(">") != -1)
|
|
config.compare = this._greater;
|
|
else if (value.indexOf("<") != -1){
|
|
config.compare = this._lesser;
|
|
equality *= -1;
|
|
}
|
|
else {
|
|
config.compare = this._equal;
|
|
equality = 0;
|
|
}
|
|
|
|
return intvalue - equality;
|
|
};
|
|
},
|
|
format:function(value){
|
|
return value.replace(/[^\-\.0-9]/g,"");
|
|
},
|
|
_greater:function(a,b){ return a*1>b; },
|
|
_lesser:function(a,b){ return a!=="" && a*1<b; },
|
|
_equal:function(a,b){ return a*1==b; }
|
|
}, webix.ui.datafilter.textFilter);
|
|
|
|
webix.ui.datafilter.dateFilter = webix.extend({
|
|
format:function(value){
|
|
if (value === "") return "";
|
|
var date = new Date();
|
|
|
|
if (value.indexOf("today") != -1){
|
|
date = webix.Date.dayStart(date);
|
|
} else if (value.indexOf("now") == -1){
|
|
var parts = value.match(/[0-9]+/g);
|
|
if (!parts||!parts.length) return "";
|
|
if (parts.length < 3){
|
|
parts.reverse();
|
|
date = new Date(parts[0], (parts[1]||1)-1, 1);
|
|
} else
|
|
date = webix.i18n.dateFormatDate(value.replace(/^[>< =]+/,""));
|
|
}
|
|
return date.valueOf();
|
|
}
|
|
}, webix.ui.datafilter.numberFilter);
|
|
|
|
webix.extend(webix.ui.datatable,{
|
|
filterByAll:function(){
|
|
//we need to use dynamic function creating
|
|
//jshint -W083:true
|
|
var server = false;
|
|
this.data.silent(function(){
|
|
this.filter();
|
|
var first = false;
|
|
for (var key in this._filter_elements){
|
|
webix.assert(key, "empty column id for column with filtering");
|
|
|
|
var record = this._filter_elements[key];
|
|
var originvalue = record[2].getValue(record[0]);
|
|
|
|
//saving last filter value, for usage in getState
|
|
var inputvalue = originvalue;
|
|
if (record[1].prepare)
|
|
inputvalue = record[1].prepare.call(record[2], inputvalue, record[1], this);
|
|
|
|
//preserve original value
|
|
record[1].value = originvalue;
|
|
var compare = record[1].compare;
|
|
|
|
if (!this.callEvent("onBeforeFilter",[key, inputvalue, record[1]])) continue;
|
|
if(record[2].$server){
|
|
server = true;
|
|
return this._runServerFilter();
|
|
} else {
|
|
if (inputvalue === "") continue;
|
|
|
|
if (compare){
|
|
compare = this._multi_compare(key, compare);
|
|
this.filter(webix.bind(function(obj, value){
|
|
if (!obj) return false;
|
|
return compare(obj[key], value, obj);
|
|
},this), inputvalue, first);
|
|
}
|
|
else
|
|
this.filter(key, inputvalue, first);
|
|
}
|
|
first = true;
|
|
}
|
|
}, this);
|
|
|
|
if (!server){
|
|
this.refresh();
|
|
this.callEvent("onAfterFilter",[]);
|
|
}
|
|
},
|
|
_multi_compare: function(key, compare){
|
|
var separator = this.getColumnConfig(key).optionslist;
|
|
//default mode
|
|
if (!separator)
|
|
return compare;
|
|
|
|
if(typeof separator != "string")
|
|
separator = ",";
|
|
|
|
return function(itemValue, inputValue, obj){
|
|
if(!itemValue)
|
|
return true;
|
|
var ids = itemValue.split(separator);
|
|
for (var i = 0; i < ids.length; i++) {
|
|
if (compare(ids[i], inputValue, obj))
|
|
return true;
|
|
}
|
|
};
|
|
},
|
|
filterMode_setter:function(mode){
|
|
return webix.extend(this.data._filterMode, mode, true);
|
|
},
|
|
getFilter:function(columnId){
|
|
var filter = this._filter_elements[columnId];
|
|
webix.assert(filter, "Filter doesn't exists for column in question");
|
|
|
|
if (filter && filter[2].getInputNode)
|
|
return filter[2].getInputNode(filter[0]);
|
|
return null;
|
|
},
|
|
registerFilter:function(node, config, obj){
|
|
this._filter_elements[config.columnId] = [node, config, obj];
|
|
},
|
|
collectValues:function(id){
|
|
var values = [];
|
|
var checks = { "" : true };
|
|
|
|
var obj = this.getColumnConfig(id);
|
|
var options = obj.options||obj.collection;
|
|
|
|
if (options){
|
|
if (typeof options == "object" && !options.loadNext){
|
|
//raw object
|
|
if (webix.isArray(options))
|
|
for (var i=0; i<options.length; i++)
|
|
values.push({ id:options[i], value:options[i] });
|
|
else
|
|
for (var key in options)
|
|
values.push({ id:key, value:options[key] });
|
|
return values;
|
|
} else {
|
|
//view
|
|
if (typeof options === "string")
|
|
options = webix.$$(options);
|
|
if (options.getBody)
|
|
options = options.getBody();
|
|
|
|
this._collectValues.call(options, "id", "value", values, checks);
|
|
}
|
|
} else
|
|
this._collectValues(obj.id, obj.id, values, checks);
|
|
|
|
var obj = { values: values };
|
|
this.callEvent("onCollectValues", [id, obj]);
|
|
return obj.values;
|
|
},
|
|
_collectValues:function(id, value, values, checks){
|
|
this.data.each(function(obj){
|
|
var test = obj ? obj[value] : "";
|
|
if (test !== webix.undefined && !checks[test]){
|
|
checks[test] = true;
|
|
values.push({ id:obj[id], value:test });
|
|
}
|
|
}, this, true);
|
|
values.sort(function(a,b){ return a.value > b.value ? 1 : -1; });
|
|
},
|
|
_runServerFilter: function(name){
|
|
this.loadNext(0,0,{
|
|
before:function(){
|
|
var url = this.data.url;
|
|
if (this.editStop) this.editStop();
|
|
this.clearAll();
|
|
this.data.url = url;
|
|
},
|
|
success:function(){
|
|
this.callEvent("onAfterFilter",[]);
|
|
}
|
|
},0,1);
|
|
}
|
|
});
|
|
|
|
|
|
webix.extend(webix.ui.datatable, {
|
|
hover_setter:function(value){
|
|
if (value && !this._hover_initialized){
|
|
this._enable_mouse_move();
|
|
this.config.experimental = true;
|
|
|
|
this.attachEvent("onMouseMoving", function(e){
|
|
|
|
var row = this.locate(arguments[0]);
|
|
row = row ? row.row : null;
|
|
|
|
if (this._last_hover != row){
|
|
if (this._last_hover)
|
|
this.removeRowCss(this._last_hover, this._settings.hover);
|
|
|
|
this._delayed_hover_set();
|
|
this._last_hover = row;
|
|
}
|
|
});
|
|
|
|
this.attachEvent("onMouseOut", function(){
|
|
if (this._last_hover){
|
|
this.removeRowCss(this._last_hover, this._settings.hover);
|
|
this._last_hover = null;
|
|
}
|
|
});
|
|
|
|
this._hover_initialized = 1;
|
|
}
|
|
return value;
|
|
},
|
|
_delayed_hover_set:function(){
|
|
webix.delay(function(){
|
|
if (this._last_hover)
|
|
this.addRowCss( this._last_hover, this._settings.hover );
|
|
}, this, [], 5);
|
|
},
|
|
select_setter:function(value){
|
|
if (!this.select && value){
|
|
webix.extend(this, this._selections._commonselect, true);
|
|
if (value === true)
|
|
value = "row";
|
|
else if (value == "multiselect"){
|
|
value = "row";
|
|
this._settings.multiselect = true;
|
|
}
|
|
webix.assert(this._selections[value], "Unknown selection mode: "+value);
|
|
webix.extend(this, this._selections[value], true);
|
|
}
|
|
return value;
|
|
},
|
|
getSelectedId:function(mode){
|
|
return mode?[]:""; //dummy placeholder
|
|
},
|
|
getSelectedItem:function(mode){
|
|
return webix.SelectionModel.getSelectedItem.call(this, mode);
|
|
},
|
|
_selections:{
|
|
//shared methods for all selection models
|
|
_commonselect:{
|
|
_select_css:' webix_cell_select',
|
|
$init:function(){
|
|
this._reinit_selection();
|
|
|
|
this.on_click.webix_cell = webix.bind(this._click_before_select, this);
|
|
|
|
//temporary stab, actual handlers need to be created
|
|
this._data_cleared = this._data_filtered = function(){
|
|
this.unselect();
|
|
};
|
|
|
|
this.data.attachEvent("onStoreUpdated",webix.bind(this._data_updated,this));
|
|
this.data.attachEvent("onClearAll", webix.bind(this._data_cleared,this));
|
|
this.data.attachEvent("onAfterFilter", webix.bind(this._data_filtered,this));
|
|
this.data.attachEvent("onIdChange", webix.bind(this._id_changed,this));
|
|
|
|
this.$ready.push(webix.SelectionModel._set_noselect);
|
|
},
|
|
_id_changed:function(oldid, newid){
|
|
for (var i=0; i<this._selected_rows.length; i++)
|
|
if (this._selected_rows[i] == oldid)
|
|
this._selected_rows[i] = newid;
|
|
|
|
for (var i=0; i<this._selected_areas.length; i++){
|
|
var item = this._selected_areas[i];
|
|
if (item.row == oldid){
|
|
oldid = this._select_key(item);
|
|
item.row = newid;
|
|
newid = this._select_key(item);
|
|
item.id = newid;
|
|
|
|
delete this._selected_pull[oldid];
|
|
this._selected_pull[newid] = true;
|
|
}
|
|
}
|
|
},
|
|
_data_updated:function(id, obj, type){
|
|
if (type == "delete")
|
|
this.unselect(id);
|
|
},
|
|
_reinit_selection:function(){
|
|
//list of selected areas
|
|
this._selected_areas=[];
|
|
//key-value hash of selected areas, for fast search
|
|
this._selected_pull={};
|
|
//used to track selected cell objects
|
|
this._selected_rows = [];
|
|
},
|
|
isSelected:function(id, column){
|
|
var key;
|
|
if (!webix.isUndefined(column))
|
|
key = this._select_key({ row:id, column: column});
|
|
else
|
|
key = typeof id === "object"? this._select_key(id) : id;
|
|
|
|
return this._selected_pull[key];
|
|
},
|
|
getSelectedId:function(asArray, plain){
|
|
var result;
|
|
|
|
//if multiple selections was created - return array
|
|
//in case of single selection, return value or array, when asArray parameter provided
|
|
if (this._selected_areas.length > 1 || asArray){
|
|
result = [].concat(this._selected_areas);
|
|
if (plain)
|
|
for (var i = 0; i < result.length; i++)
|
|
result[i]=result[i].id;
|
|
} else {
|
|
result = this._selected_areas[0];
|
|
if (plain && result)
|
|
return result.id;
|
|
}
|
|
|
|
return result;
|
|
},
|
|
_id_to_string:function(){
|
|
return this.row;
|
|
},
|
|
_select:function(data, preserve){
|
|
var key = this._select_key(data);
|
|
//don't allow selection on unnamed columns
|
|
if (key === null) return;
|
|
|
|
if (preserve === -1)
|
|
return this._unselect(data);
|
|
|
|
data.id = key;
|
|
data.toString = this._id_to_string;
|
|
|
|
if (!this.callEvent("onBeforeSelect",[data, preserve])) return false;
|
|
|
|
//ignore area, if it was already selected and
|
|
// - we are preserving existing selection
|
|
// - this is the only selected area
|
|
// otherwise we need to clear other selected areas
|
|
if (this._selected_pull[key] && (preserve || this._selected_areas.length == 1)) return;
|
|
|
|
if (!preserve)
|
|
this._clear_selection();
|
|
|
|
this._selected_areas.push(data);
|
|
this._selected_pull[key] = true;
|
|
|
|
this.callEvent("onAfterSelect",[data, preserve]);
|
|
|
|
|
|
this._finalize_select(this._post_select(data));
|
|
return true;
|
|
},
|
|
_clear_selection:function(){
|
|
if (!this._selected_areas.length) return false;
|
|
|
|
for (var i=0; i<this._selected_rows.length; i++){
|
|
var item = this.getItem(this._selected_rows[i]);
|
|
if (item)
|
|
this.data.removeMark(item.id, "webix_selected", 0, 1);
|
|
}
|
|
var cols = this._settings.columns;
|
|
if (cols)
|
|
for (var i = 0; i < cols.length; i++) {
|
|
cols[i].$selected = null;
|
|
}
|
|
|
|
this._reinit_selection();
|
|
return true;
|
|
},
|
|
unselectAll:function(){
|
|
this.clearSelection();
|
|
},
|
|
selectAll:function(){
|
|
this.selectRange();
|
|
},
|
|
clearSelection:function(){
|
|
if (this._clear_selection()){
|
|
this.callEvent("onSelectChange",[]);
|
|
this.render();
|
|
}
|
|
},
|
|
_unselect:function(data){
|
|
var key = this._select_key(data);
|
|
if (!key && this._selected_areas.length){
|
|
this.clearSelection();
|
|
this.callEvent("onSelectChange", []);
|
|
}
|
|
|
|
//ignore area, if it was already selected
|
|
if (!this._selected_pull[key]) return;
|
|
|
|
if (!this.callEvent("onBeforeUnSelect",[data])) return false;
|
|
|
|
for (var i = 0; i < this._selected_areas.length; i++){
|
|
if (this._selected_areas[i].id == key){
|
|
this._selected_areas.splice(i,1);
|
|
break;
|
|
}
|
|
}
|
|
|
|
delete this._selected_pull[key];
|
|
|
|
this.callEvent("onAfterUnSelect",[data]);
|
|
this._finalize_select(0, this._post_unselect(data));
|
|
},
|
|
_add_item_select:function(id){
|
|
var item = this.getItem(id);
|
|
return this.data.addMark(item.id, "webix_selected", 0, { $count : 0 }, true);
|
|
|
|
},
|
|
_finalize_select:function(id){
|
|
if (id)
|
|
this._selected_rows.push(id);
|
|
if (!this._silent_selection){
|
|
this.render();
|
|
this.callEvent("onSelectChange",[]);
|
|
}
|
|
},
|
|
_click_before_select:function(e, id){
|
|
var preserve = e.ctrlKey || e.metaKey || (this._settings.multiselect == "touch");
|
|
var range = e.shiftKey;
|
|
|
|
if (!this._settings.multiselect && this._settings.select != "multiselect")
|
|
preserve = range = false;
|
|
|
|
if (range && this._selected_areas.length){
|
|
var last = this._selected_areas[this._selected_areas.length-1];
|
|
this._selectRange(id, last);
|
|
} else {
|
|
if (preserve && this._selected_pull[this._select_key(id)])
|
|
this._unselect(id);
|
|
else
|
|
this._select({ row: id.row, column:id.column }, preserve);
|
|
}
|
|
},
|
|
_mapSelection:function(callback, column, row){
|
|
var cols = this._settings.columns;
|
|
//selected columns only
|
|
if (column){
|
|
var temp = [];
|
|
for (var i=0; i<cols.length; i++)
|
|
if (cols[i].$selected)
|
|
temp.push(cols[i]);
|
|
cols = temp;
|
|
}
|
|
|
|
var rows = this.data.order;
|
|
var row_ind = 0;
|
|
|
|
for (var i=0; i<rows.length; i++){
|
|
var item = this.getItem(rows[i]);
|
|
if (!item) continue; //dyn loading, row is not available
|
|
var selection = this.data.getMark(item.id, "webix_selected");
|
|
if (selection || column){
|
|
var col_ind = 0;
|
|
for (var j = 0; j < cols.length; j++){
|
|
var id = cols[j].id;
|
|
if (row || column || selection[id]){
|
|
if (callback)
|
|
item[id] = callback(item[id], rows[i], id, row_ind, col_ind);
|
|
else
|
|
return {row:rows[i], column:id};
|
|
col_ind++;
|
|
}
|
|
}
|
|
//use separate row counter, to count only selected rows
|
|
row_ind++;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
row : {
|
|
_select_css:' webix_row_select',
|
|
_select_key:function(data){ return data.row; },
|
|
select:function(row_id, preserve){
|
|
//when we are using id from mouse events
|
|
if (row_id) row_id = row_id.toString();
|
|
|
|
webix.assert(this.data.exists(row_id), "Incorrect id in select command: "+row_id);
|
|
this._select({ row:row_id }, preserve);
|
|
},
|
|
_post_select:function(data){
|
|
this._add_item_select(data.row).$row = true;
|
|
return data.row;
|
|
},
|
|
unselect:function(row_id){
|
|
this._unselect({row : row_id});
|
|
},
|
|
_post_unselect:function(data){
|
|
this.data.removeMark(data.row, "webix_selected", 0, 1);
|
|
return data.row;
|
|
},
|
|
mapSelection:function(callback){
|
|
return this._mapSelection(callback, false, true);
|
|
},
|
|
_selectRange:function(a,b){
|
|
return this.selectRange(a.row, b.row);
|
|
},
|
|
selectRange:function(row_id, end_row_id, preserve){
|
|
if (webix.isUndefined(preserve)) preserve = true;
|
|
|
|
var row_start_ind = row_id ? this.getIndexById(row_id) : 0;
|
|
var row_end_ind = end_row_id ? this.getIndexById(end_row_id) : this.data.order.length-1;
|
|
|
|
if (row_start_ind>row_end_ind){
|
|
var temp = row_start_ind;
|
|
row_start_ind = row_end_ind;
|
|
row_end_ind = temp;
|
|
}
|
|
|
|
this._silent_selection = true;
|
|
for (var i=row_start_ind; i<=row_end_ind; i++)
|
|
this.select(this.getIdByIndex(i), preserve);
|
|
this._silent_selection = false;
|
|
this._finalize_select();
|
|
}
|
|
},
|
|
|
|
cell:{
|
|
_select_key:function(data){
|
|
if (!data.column) return null;
|
|
return data.row+"_"+data.column;
|
|
},
|
|
select:function(row_id, column_id, preserve){
|
|
webix.assert(this.data.exists(row_id), "Incorrect id in select command: "+row_id);
|
|
this._select({row:row_id, column:column_id}, preserve);
|
|
},
|
|
_post_select:function(data){
|
|
var sel = this._add_item_select(data.row);
|
|
sel.$count++;
|
|
sel[data.column]=true;
|
|
return data.row;
|
|
},
|
|
unselect:function(row_id, column_id){
|
|
this._unselect({row:row_id, column:column_id});
|
|
},
|
|
_post_unselect:function(data){
|
|
var sel = this._add_item_select(data.row);
|
|
sel.$count-- ;
|
|
sel[data.column] = false;
|
|
if (sel.$count<=0)
|
|
this.data.removeMark(data.row,"webix_selected");
|
|
return data.row;
|
|
},
|
|
mapSelection:function(callback){
|
|
return this._mapSelection(callback, false, false);
|
|
},
|
|
_selectRange:function(a,b){
|
|
return this.selectRange(a.row, a.column, b.row, b.column);
|
|
},
|
|
|
|
selectRange:function(row_id, column_id, end_row_id, end_column_id, preserve){
|
|
if (webix.isUndefined(preserve)) preserve = true;
|
|
|
|
var row_start_ind = row_id ? this.getIndexById(row_id) : 0;
|
|
var row_end_ind = end_row_id ? this.getIndexById(end_row_id) : this.data.order.length-1;
|
|
|
|
var col_start_ind = column_id ? this.getColumnIndex(column_id) : 0;
|
|
var col_end_ind = end_column_id ? this.getColumnIndex(end_column_id) : this._columns.length-1;
|
|
|
|
if (row_start_ind>row_end_ind){
|
|
var temp = row_start_ind;
|
|
row_start_ind = row_end_ind;
|
|
row_end_ind = temp;
|
|
}
|
|
|
|
if (col_start_ind>col_end_ind){
|
|
var temp = col_start_ind;
|
|
col_start_ind = col_end_ind;
|
|
col_end_ind = temp;
|
|
}
|
|
|
|
this._silent_selection = true;
|
|
for (var i=row_start_ind; i<=row_end_ind; i++)
|
|
for (var j=col_start_ind; j<=col_end_ind; j++)
|
|
this.select(this.getIdByIndex(i), this.columnId(j), preserve);
|
|
this._silent_selection = false;
|
|
this._finalize_select();
|
|
}
|
|
},
|
|
|
|
column:{
|
|
_select_css:' webix_column_select',
|
|
_select_key:function(data){ return data.column; },
|
|
_id_to_string:function(){
|
|
return this.column;
|
|
},
|
|
//returns box-like area, with ordered selection cells
|
|
select:function(column_id, preserve){
|
|
this._select({ column:column_id }, preserve);
|
|
},
|
|
_post_select:function(data){
|
|
this._settings.columns[this.getColumnIndex(data.column)].$selected = true;
|
|
if (!this._silent_selection)
|
|
this._render_header_and_footer();
|
|
},
|
|
unselect:function(column_id){
|
|
this._unselect({column : column_id});
|
|
},
|
|
_post_unselect:function(data){
|
|
this._settings.columns[this.getColumnIndex(data.column)].$selected = null;
|
|
this._render_header_and_footer();
|
|
},
|
|
mapSelection:function(callback){
|
|
return this._mapSelection(callback, true, false);
|
|
},
|
|
_selectRange:function(a,b){
|
|
return this.selectRange(a.column, b.column);
|
|
},
|
|
selectRange:function(column_id, end_column_id, preserve){
|
|
if (webix.isUndefined(preserve)) preserve = true;
|
|
|
|
var column_start_ind = column_id ? this.getColumnIndex(column_id) : 0;
|
|
var column_end_ind = end_column_id ? this.getColumnIndex(end_column_id) : this._columns.length-1;
|
|
|
|
if (column_start_ind>column_end_ind){
|
|
var temp = column_start_ind;
|
|
column_start_ind = column_end_ind;
|
|
column_end_ind = temp;
|
|
}
|
|
|
|
this._silent_selection = true;
|
|
for (var i=column_start_ind; i<=column_end_ind; i++)
|
|
this.select(this.columnId(i), preserve);
|
|
|
|
this._silent_selection = false;
|
|
|
|
this._render_header_and_footer();
|
|
this._finalize_select();
|
|
}
|
|
},
|
|
area: {
|
|
_select_key:function(data){
|
|
return data.row+"_"+data.column;
|
|
},
|
|
getSelectedId: function(asArray){
|
|
var area = this.getSelectArea();
|
|
var result = [];
|
|
if(area){
|
|
if(asArray && ( area.start.row != area.end.row || area.start.column != area.end.column )){
|
|
var row_start_ind = this.getIndexById(area.start.row);
|
|
var row_end_ind = this.getIndexById(area.end.row);
|
|
|
|
var col_start_ind = this.getColumnIndex(area.start.column);
|
|
var col_end_ind = this.getColumnIndex(area.end.column);
|
|
|
|
for (var i=row_start_ind; i<=row_end_ind; i++)
|
|
for (var j=col_start_ind; j<=col_end_ind; j++){
|
|
result.push({row:this.getIdByIndex(i), column:this.columnId(j)});
|
|
}
|
|
|
|
}
|
|
else{
|
|
result.push(area.end);
|
|
}
|
|
}
|
|
|
|
return asArray?result:result[0];
|
|
},
|
|
unselect:function(row_id){
|
|
this.removeSelectArea();
|
|
},
|
|
_unselect: function() {
|
|
this.removeSelectArea();
|
|
},
|
|
mapSelection:function(callback){
|
|
var select = this.getSelectArea();
|
|
if (select){
|
|
var sind = this.getColumnIndex(select.start.column);
|
|
var eind = this.getColumnIndex(select.end.column);
|
|
var srow = this.getIndexById(select.start.row);
|
|
var erow = this.getIndexById(select.end.row);
|
|
|
|
for (var i = srow; i <= erow; i++) {
|
|
var rid = this.data.order[i];
|
|
var item = this.getItem(rid);
|
|
for (var j = sind; j <= eind; j++) {
|
|
var cid = this._columns[j].id;
|
|
if (callback)
|
|
callback((item[cid] || ""), rid, cid, i-srow, j-sind);
|
|
else
|
|
return { row:rid, column:cid };
|
|
}
|
|
}
|
|
|
|
}
|
|
},
|
|
_selectRange:function(id,last){
|
|
this._extendAreaRange(id, last);
|
|
},
|
|
_select: function(cell, preserve){
|
|
//ctrl-selection is not supported yet, so ignoring the preserve flag
|
|
this.addSelectArea(cell,cell,false);
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
webix.extend(webix.ui.datatable, {
|
|
blockselect_setter:function(value){
|
|
if (value && this._block_sel_flag){
|
|
webix.event(this._viewobj, webix.env.mouse.move, this._bs_move, {bind:this});
|
|
webix.event(this._viewobj, webix.env.mouse.down, this._bs_down, {bind:this});
|
|
webix.event(document.body, webix.env.mouse.up, this._bs_up, {bind:this});
|
|
this._block_sel_flag = this._bs_ready = this._bs_progress = false;
|
|
}
|
|
return value;
|
|
},
|
|
_block_sel_flag:true,
|
|
_childOf:function(e, tag){
|
|
var src = e.target||e.srcElement;
|
|
while (src){
|
|
if (src.getAttribute && src.getAttribute("webixignore")) return false;
|
|
if (src == tag)
|
|
return true;
|
|
src = src.parentNode;
|
|
}
|
|
return false;
|
|
},
|
|
_bs_down:function(e){
|
|
if (this._childOf(e, this._body)){
|
|
//disable block selection when we have an active editor
|
|
if (e.target && e.target.tagName == "INPUT" || this._rs_process) return;
|
|
|
|
webix.html.addCss(document.body,"webix_noselect");
|
|
this._bs_position = webix.html.offset(this._body);
|
|
|
|
var pos = webix.html.pos(e);
|
|
|
|
this._bs_ready = [pos.x - this._bs_position.x, pos.y - this._bs_position.y];
|
|
}
|
|
},
|
|
_bs_up:function(e){
|
|
if (this._block_panel){
|
|
this._bs_select("select", true, e);
|
|
this._block_panel = webix.html.remove(this._block_panel);
|
|
}
|
|
webix.html.removeCss(document.body,"webix_noselect");
|
|
this._bs_ready = this._bs_progress = false;
|
|
},
|
|
_bs_select:function(mode, theend, e){
|
|
var start = this._locate_cell_xy.apply(this, this._bs_ready);
|
|
var end = this._locate_cell_xy.apply(this, this._bs_progress);
|
|
|
|
if (!this.callEvent("onBeforeBlockSelect", [start, end, theend, e]))
|
|
return;
|
|
|
|
if ((!this._bs_do_select || this._bs_do_select(start, end, theend, e) !== false) && (start.row && end.row)){
|
|
if (mode === "select"){
|
|
this._clear_selection();
|
|
|
|
this._selectRange(start, end);
|
|
} else {
|
|
var x1 = this._bs_ready;
|
|
var startx, starty, endx, endy;
|
|
|
|
if (mode === "box"){
|
|
startx = Math.min(this._bs_ready[0],this._bs_progress[0]);
|
|
endx = Math.max(this._bs_ready[0],this._bs_progress[0]);
|
|
|
|
starty = Math.min(this._bs_ready[1],this._bs_progress[1]);
|
|
endy = Math.max(this._bs_ready[1],this._bs_progress[1]);
|
|
} else {
|
|
var startn = this._cellPosition(start.row, start.column);
|
|
var endn = this._cellPosition(end.row, end.column);
|
|
var scroll = this.getScrollState();
|
|
|
|
var startWidth = startn.width;
|
|
var endWidth = endn.width;
|
|
|
|
if (this._right_width && this._bs_ready[0] > this._left_width+this._center_width){
|
|
startn.left += this._left_width+this._center_width;
|
|
} else if (this._left_width){
|
|
|
|
if (this._bs_ready[0] > this._left_width){
|
|
if(startn.left < scroll.x){
|
|
startWidth -= scroll.x-startn.left;
|
|
startn.left = this._left_width;
|
|
}
|
|
else
|
|
startn.left+=this._left_width-scroll.x;
|
|
|
|
}
|
|
|
|
} else startn.left -= scroll.x;
|
|
|
|
|
|
|
|
if (this._right_width && this._bs_progress[0] > this._left_width+this._center_width){
|
|
endn.left += this._left_width+this._center_width;
|
|
} else if (this._left_width){
|
|
if (this._bs_progress[0] > this._left_width){
|
|
if(endn.left < scroll.x){
|
|
endWidth -= scroll.x-endn.left;
|
|
endn.left = this._left_width;
|
|
}
|
|
|
|
else
|
|
endn.left+=this._left_width-scroll.x;
|
|
}
|
|
} else endn.left -= scroll.x;
|
|
|
|
if(this._settings.prerender){
|
|
startn.top -= this._scrollTop;
|
|
endn.top -= this._scrollTop;
|
|
}
|
|
|
|
startx = Math.min(startn.left, endn.left);
|
|
endx = Math.max(startn.left+startWidth, endn.left+endWidth);
|
|
|
|
starty = Math.min(startn.top, endn.top);
|
|
endy = Math.max(startn.top+startn.height, endn.top+endn.height);
|
|
}
|
|
|
|
|
|
var style = this._block_panel.style;
|
|
style.left = startx+"px";
|
|
style.top = starty+"px";
|
|
style.width = (endx-startx)+"px";
|
|
style.height = (endy-starty)+"px";
|
|
|
|
}
|
|
}
|
|
|
|
if (theend)
|
|
this.callEvent("onAfterBlockSelect", [start, end]);
|
|
},
|
|
_bs_start:function(e){
|
|
this._block_panel = webix.html.create("div", {"class":"webix_block_selection"},"");
|
|
|
|
this._body.appendChild(this._block_panel);
|
|
},
|
|
_bs_move:function(e){
|
|
if (this._bs_ready !== false){
|
|
var pos = webix.html.pos(e);
|
|
var progress = [pos.x - this._bs_position.x, pos.y - this._bs_position.y];
|
|
|
|
//prevent unnecessary block selection while dbl-clicking
|
|
if (Math.abs(this._bs_ready[0] - progress[0]) < 5 && Math.abs(this._bs_ready[1] - progress[1]) < 5)
|
|
return;
|
|
|
|
if (this._bs_progress === false)
|
|
this._bs_start(e);
|
|
|
|
this._bs_progress = progress;
|
|
this._bs_select(this.config.blockselect, false, e);
|
|
}
|
|
},
|
|
_locate_cell_xy:function(x,y){
|
|
if (this._right_width && x>this._left_width + this._center_width)
|
|
x+= this._x_scroll.getSize()-this._center_width-this._left_width-this._right_width;
|
|
else if (!this._left_width || x>this._left_width)
|
|
x+= this._x_scroll.getScroll();
|
|
|
|
|
|
y += this.getScrollState().y;
|
|
|
|
var row = null;
|
|
var column = null;
|
|
|
|
if (x<0) x=0;
|
|
if (y<0) y=0;
|
|
|
|
var cols = this._settings.columns;
|
|
var rows = this.data.order;
|
|
|
|
var summ = 0;
|
|
for (var i=0; i<cols.length; i++){
|
|
summ+=cols[i].width;
|
|
if (summ>=x){
|
|
column = cols[i].id;
|
|
break;
|
|
}
|
|
}
|
|
if (!column)
|
|
column = cols[cols.length-1].id;
|
|
|
|
summ = 0;
|
|
if (this._settings.fixedRowHeight){
|
|
row = rows[Math.floor(y/this._settings.rowHeight)];
|
|
} else for (var i=0; i<rows.length; i++){
|
|
summ+=this._getHeightByIndex(i);
|
|
if (summ>=y){
|
|
row = rows[i];
|
|
break;
|
|
}
|
|
}
|
|
if (!row)
|
|
row = rows[rows.length-1];
|
|
|
|
return {row:row, column:column};
|
|
}
|
|
});
|
|
webix.protoUI({
|
|
name:"resizearea",
|
|
defaults:{
|
|
dir:"x"
|
|
},
|
|
$init:function(config){
|
|
var dir = config.dir||"x";
|
|
var node = webix.toNode(config.container);
|
|
var size = (dir=="x"?"width":"height");
|
|
var margin = (config.margin? config.margin+"px":0);
|
|
|
|
this._key_property = (dir == "x"?"left":"top");
|
|
|
|
this._viewobj = webix.html.create("DIV",{
|
|
"class" : "webix_resize_area webix_dir_"+dir
|
|
});
|
|
//[[COMPAT]] FF12 can produce 2 move events
|
|
webix.event(this._viewobj, webix.env.mouse.down, webix.html.stopEvent);
|
|
|
|
if(margin){
|
|
if(dir=="x")
|
|
margin = margin+" 0 "+margin;
|
|
else
|
|
margin = "0 "+margin+" 0 "+margin;
|
|
}
|
|
this._dragobj = webix.html.create("DIV",{
|
|
"class" : "webix_resize_handle_"+dir,
|
|
"style" : (margin?"padding:"+margin:"")
|
|
},"<div class='webix_handle_content'></div>");
|
|
|
|
this._originobj = webix.html.create("DIV",{
|
|
"class" : "webix_resize_origin_"+dir
|
|
});
|
|
|
|
if(config[size]){
|
|
this._originobj.style[size] = config[size]+(config.border?1:0)+"px";
|
|
this._dragobj.style[size] = config[size]+"px";
|
|
}
|
|
if (config.cursor)
|
|
this._dragobj.style.cursor = this._originobj.style.cursor = this._viewobj.style.cursor = config.cursor;
|
|
this._moveev = webix.event(node, webix.env.mouse.move, this._onmove, {bind:this});
|
|
this._upev = webix.event(document.body, webix.env.mouse.up, this._onup, {bind:this});
|
|
|
|
this._dragobj.style[this._key_property] = this._originobj.style[this._key_property] = config.start+"px";
|
|
|
|
node.appendChild(this._viewobj);
|
|
node.appendChild(this._dragobj);
|
|
node.appendChild(this._originobj);
|
|
},
|
|
_onup:function(){
|
|
|
|
this.callEvent("onResizeEnd", [this._last_result]);
|
|
|
|
webix.eventRemove(this._moveev);
|
|
webix.eventRemove(this._upev);
|
|
|
|
webix.html.remove(this._viewobj);
|
|
webix.html.remove(this._dragobj);
|
|
webix.html.remove(this._originobj);
|
|
this._viewobj = this._dragobj = this._originobj = null;
|
|
},
|
|
_onmove:function(e){
|
|
var pos = webix.html.pos(e);
|
|
this._last_result = (this._settings.dir == "x" ? pos.x : pos.y)+this._settings.start-this._settings.eventPos;
|
|
this._dragobj.style[this._key_property] = this._last_result+"px";
|
|
this.callEvent("onResize", [this._last_result]);
|
|
}
|
|
}, webix.EventSystem, webix.Settings);
|
|
webix.extend(webix.ui.datatable, {
|
|
|
|
resizeRow_setter:function(value){
|
|
this._settings.scrollAlignY = false;
|
|
this._settings.fixedRowHeight = false;
|
|
return this.resizeColumn_setter(value);
|
|
},
|
|
resizeColumn_setter:function(value){
|
|
if (value && this._rs_init_flag){
|
|
webix.event(this._viewobj, "mousemove", this._rs_move, {bind:this});
|
|
webix.event(this._viewobj, "mousedown", this._rs_down, {bind:this});
|
|
webix.event(this._viewobj, "mouseup", this._rs_up, {bind:this});
|
|
this._rs_init_flag = false;
|
|
}
|
|
return value;
|
|
},
|
|
_rs_init_flag:true,
|
|
_rs_down:function(e){
|
|
//if mouse was near border
|
|
if (!this._rs_ready) return;
|
|
this._rs_process = [webix.html.pos(e),this._rs_ready[2]];
|
|
webix.html.addCss(document.body,"webix_noselect");
|
|
webix.html.denySelect();
|
|
},
|
|
_rs_up:function(){
|
|
this._rs_process = false;
|
|
webix.html.removeCss(document.body,"webix_noselect");
|
|
webix.html.allowSelect();
|
|
},
|
|
_rs_start:function(e){
|
|
e = e||event;
|
|
if(this._rs_progress)
|
|
return;
|
|
var dir = this._rs_ready[0];
|
|
var node = this._rs_process[1];
|
|
var obj = this._locate(node);
|
|
if (!obj) return;
|
|
|
|
var eventPos = this._rs_process[0];
|
|
var start;
|
|
|
|
if (dir == "x"){
|
|
start = webix.html.offset(node).x+this._rs_ready[1] - webix.html.offset(this._body).x;
|
|
eventPos = eventPos.x;
|
|
if (!this._rs_ready[1]) obj.cind-=(node.parentNode.colSpan||1);
|
|
} else {
|
|
start = webix.html.offset(node).y+this._rs_ready[1] - webix.html.offset(this._body).y+this._header_height;
|
|
eventPos = eventPos.y;
|
|
if (!this._rs_ready[1]) obj.rind--;
|
|
}
|
|
if (obj.cind>=0 && obj.rind>=0){
|
|
this._rs_progress = [dir, obj, start];
|
|
|
|
var resize = new webix.ui.resizearea({
|
|
container:this._viewobj,
|
|
dir:dir,
|
|
eventPos:eventPos,
|
|
start:start,
|
|
cursor:(dir == "x"?"e":"n")+"-resize"
|
|
});
|
|
resize.attachEvent("onResizeEnd", webix.bind(this._rs_end, this));
|
|
}
|
|
this._rs_down = this._rs_ready = false;
|
|
},
|
|
_rs_end:function(result){
|
|
if (this._rs_progress){
|
|
var dir = this._rs_progress[0];
|
|
var obj = this._rs_progress[1];
|
|
var newsize = result-this._rs_progress[2];
|
|
if (dir == "x"){
|
|
|
|
//in case of right split - different sizing logic applied
|
|
if (this._settings.rightSplit && obj.cind+1>=this._rightSplit &&
|
|
obj.cind !== this._columns.length - 1)
|
|
{
|
|
obj.cind++;
|
|
newsize *= -1;
|
|
}
|
|
|
|
var column = this._columns[obj.cind];
|
|
var oldwidth = column.width;
|
|
delete column.fillspace;
|
|
this._setColumnWidth(obj.cind, oldwidth + newsize, true, true);
|
|
this._updateColsSizeSettings();
|
|
}
|
|
else {
|
|
var rid = this.getIdByIndex(obj.rind);
|
|
var oldheight = this._getRowHeight(this.getItem(rid));
|
|
this.setRowHeight(rid, oldheight + newsize);
|
|
}
|
|
this._rs_up();
|
|
}
|
|
this._rs_progress = null;
|
|
},
|
|
_rs_move:function(e){
|
|
var config = this._settings;
|
|
if (this._rs_ready && this._rs_process)
|
|
return this._rs_start(e);
|
|
|
|
e = e||event;
|
|
var node = e.target||e.srcElement;
|
|
var mode = false; //resize ready flag
|
|
|
|
if (node.tagName == "TD" || node.tagName == "TABLE") return ;
|
|
var element_class = node.className||"";
|
|
var in_body = element_class.indexOf("webix_cell")!=-1;
|
|
//ignore resize in case of drag-n-drop enabled
|
|
if (in_body && config.drag) return;
|
|
var in_header = element_class.indexOf("webix_hcell")!=-1;
|
|
this._rs_ready = false;
|
|
|
|
if (in_body || in_header){
|
|
var dx = node.offsetWidth;
|
|
var dy = node.offsetHeight;
|
|
var pos = webix.html.posRelative(e);
|
|
|
|
var resizeRow = config.resizeRow;
|
|
if (in_body && resizeRow){
|
|
if(resizeRow===true)
|
|
resizeRow = 3;
|
|
if (pos.y<resizeRow){
|
|
this._rs_ready = ["y", 0, node];
|
|
mode = "n-resize";
|
|
} else if (dy-pos.y<resizeRow+1){
|
|
this._rs_ready = ["y", dy, node];
|
|
mode = "n-resize";
|
|
}
|
|
|
|
}
|
|
var resizeColumn = config.resizeColumn;
|
|
if (resizeColumn){
|
|
if(resizeColumn===true)
|
|
resizeColumn = 3;
|
|
if (pos.x<resizeColumn){
|
|
this._rs_ready = ["x", 0, node];
|
|
mode = "e-resize";
|
|
} else if (dx-pos.x<resizeColumn+1){
|
|
this._rs_ready = ["x", dx, node];
|
|
mode = "e-resize";
|
|
}
|
|
}
|
|
}
|
|
|
|
//mark or unmark resizing ready state
|
|
if (this._cursor_timer) window.clearTimeout(this._cursor_timer);
|
|
this._cursor_timer = webix.delay(this._mark_resize_ready, this, [mode], mode?100:0);
|
|
},
|
|
|
|
_mark_resize_ready:function(mode){
|
|
if (this._last_cursor_mode != mode){
|
|
this._last_cursor_mode = mode;
|
|
this._viewobj.style.cursor=mode||"default";
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
webix.extend(webix.ui.datatable,webix.PagingAbility);
|
|
|
|
webix.csv = {
|
|
escape:true,
|
|
delimiter:{
|
|
rows: "\n",
|
|
cols: "\t"
|
|
},
|
|
parse:function(text, sep){
|
|
sep = sep||this.delimiter;
|
|
if (!this.escape)
|
|
return this._split_clip_data(text, sep);
|
|
|
|
var lines = text.replace(/\n$/,"").split(sep.rows);
|
|
|
|
var i = 0;
|
|
while (i < lines.length - 1) {
|
|
if (this._substr_count(lines[i], '"') % 2 === 1) {
|
|
lines[i] += sep.rows + lines[i + 1];
|
|
delete lines[i + 1];
|
|
i++;
|
|
}
|
|
i++;
|
|
}
|
|
var csv = [];
|
|
for (i = 0; i < lines.length; i++) {
|
|
if (typeof(lines[i]) !== 'undefined') {
|
|
var line = lines[i].split(sep.cols);
|
|
for (var j = 0; j < line.length; j++) {
|
|
if (line[j].indexOf('"') === 0)
|
|
line[j] = line[j].substr(1, line[j].length - 2);
|
|
line[j] = line[j].replace('""', '"');
|
|
}
|
|
csv.push(line);
|
|
}
|
|
}
|
|
return csv;
|
|
},
|
|
_split_clip_data: function(text, sep) {
|
|
var lines = text.split(sep.rows);
|
|
for (var i = 0; i < lines.length; i++) {
|
|
lines[i] = lines[i].split(sep.cols);
|
|
}
|
|
return lines;
|
|
},
|
|
/*! counts how many occurances substring in string **/
|
|
_substr_count: function(string, substring) {
|
|
var arr = string.split(substring);
|
|
return arr.length - 1;
|
|
},
|
|
stringify:function(data, sep){
|
|
sep = sep||this.delimiter;
|
|
|
|
if (!this.escape){
|
|
for (var i = 0; i < data.length; i++)
|
|
data[i] = data[i].join(sep.cols);
|
|
return data.join(sep.rows);
|
|
}
|
|
|
|
var reg = /\n|\"|;|,/;
|
|
for (var i = 0; i < data.length; i++) {
|
|
for (var j = 0; j < data[i].length; j++) {
|
|
if (reg.test(data[i][j])) {
|
|
data[i][j] = data[i][j].replace(/"/g, '""');
|
|
data[i][j] = '"' + data[i][j] + '"';
|
|
}
|
|
}
|
|
data[i] = data[i].join(sep.cols);
|
|
}
|
|
data = data.join(sep.rows);
|
|
return data;
|
|
}
|
|
};
|
|
|
|
webix.TablePaste = {
|
|
clipboard_setter:function(value){
|
|
if (value === true || value === 1) this._settings.clipboard = 'block';
|
|
webix.clipbuffer.init();
|
|
this.attachEvent("onSelectChange",this._sel_to_clip);
|
|
// solution for clicks on selected items
|
|
this.attachEvent("onItemClick",function(id,e,node){
|
|
if(!document.activeElement || !this.$view.contains(document.activeElement)){
|
|
webix.clipbuffer.focus();
|
|
webix.UIManager.setFocus(this);
|
|
}
|
|
});
|
|
this.attachEvent("onPaste", this._clip_to_sel);
|
|
|
|
return value;
|
|
},
|
|
|
|
_sel_to_clip: function() {
|
|
if (!this.getEditor || !this.getEditor()){
|
|
var data = this._get_sel_text();
|
|
webix.clipbuffer.set(data);
|
|
webix.UIManager.setFocus(this);
|
|
}
|
|
},
|
|
|
|
_get_sel_text: function() {
|
|
var data = [];
|
|
this.mapSelection(function(value, row, col, row_ind, col_ind) {
|
|
if (!data[row_ind]) data[row_ind] = [];
|
|
data[row_ind].push(value);
|
|
return value;
|
|
});
|
|
|
|
return webix.csv.stringify(data, this._settings.delimiter);
|
|
},
|
|
|
|
_clip_to_sel: function(text) {
|
|
if (!webix.isUndefined(this._paste[this._settings.clipboard])) {
|
|
var data = webix.csv.parse(text, this._settings.delimiter);
|
|
this._paste[this._settings.clipboard].call(this, data);
|
|
}
|
|
},
|
|
|
|
_paste: {
|
|
block: function(data) {
|
|
var leftTop = this.mapSelection(null);
|
|
if (!leftTop) return;
|
|
|
|
// filling cells with data
|
|
this.mapCells(leftTop.row, leftTop.column, data.length, null, function(value, row, col, row_ind, col_ind) {
|
|
if (data[row_ind] && data[row_ind].length>col_ind) {
|
|
return data[row_ind][col_ind];
|
|
}
|
|
return value;
|
|
});
|
|
this.render();
|
|
},
|
|
|
|
selection: function(data) {
|
|
this.mapSelection(function(value, row, col, row_ind, col_ind) {
|
|
if (data[row_ind] && data[row_ind].length>col_ind)
|
|
return data[row_ind][col_ind];
|
|
return value;
|
|
});
|
|
this.render();
|
|
},
|
|
|
|
repeat: function(data) {
|
|
this.mapSelection(function(value, row, col, row_ind, col_ind) {
|
|
row = data[row_ind%data.length];
|
|
value = row[col_ind%row.length];
|
|
return value;
|
|
});
|
|
this.render();
|
|
},
|
|
|
|
custom: function(text) {}
|
|
}
|
|
};
|
|
|
|
webix.extend(webix.ui.datatable, webix.TablePaste);
|
|
if(!webix.storage)
|
|
webix.storage = {};
|
|
|
|
webix.storage.local = {
|
|
put:function(name, data){
|
|
try {
|
|
if(name && window.JSON && window.localStorage){
|
|
window.localStorage.setItem(name, window.JSON.stringify(data));
|
|
}
|
|
} catch (e) {}
|
|
},
|
|
get:function(name){
|
|
try {
|
|
if(name && window.JSON && window.localStorage){
|
|
var json = window.localStorage.getItem(name);
|
|
if(!json)
|
|
return null;
|
|
return webix.DataDriver.json.toObject(json);
|
|
}else
|
|
return null;
|
|
} catch (e) {}
|
|
},
|
|
remove:function(name){
|
|
try {
|
|
if(name && window.JSON && window.localStorage){
|
|
window.localStorage.removeItem(name);
|
|
}
|
|
} catch (e) {}
|
|
},
|
|
clear:function(){
|
|
try {
|
|
window.localStorage.clear();
|
|
} catch (e) {}
|
|
}
|
|
};
|
|
|
|
webix.storage.session = {
|
|
put:function(name, data){
|
|
try {
|
|
if(name && window.JSON && window.sessionStorage){
|
|
window.sessionStorage.setItem(name, window.JSON.stringify(data));
|
|
}
|
|
} catch (e) {}
|
|
},
|
|
get:function(name){
|
|
try {
|
|
if(name && window.JSON && window.sessionStorage){
|
|
var json = window.sessionStorage.getItem(name);
|
|
if(!json)
|
|
return null;
|
|
return webix.DataDriver.json.toObject(json);
|
|
} else
|
|
return null;
|
|
} catch (e) {};
|
|
},
|
|
remove:function(name){
|
|
try {
|
|
if(name && window.JSON && window.sessionStorage){
|
|
window.sessionStorage.removeItem(name);
|
|
}
|
|
} catch (e) {}
|
|
},
|
|
clear:function(){
|
|
try {
|
|
window.sessionStorage.clear();
|
|
} catch (e){}
|
|
}
|
|
};
|
|
|
|
webix.storage.cookie = {
|
|
put:function(name, data, domain, expires ){
|
|
if(name && window.JSON){
|
|
document.cookie = name + "=" + escape(window.JSON.stringify(data)) +
|
|
(( expires && (expires instanceof Date)) ? ";expires=" + expires.toUTCString() : "" ) +
|
|
(( domain ) ? ";domain=" + domain : "" ) +
|
|
(( webix.env.https ) ? ";secure" : "");
|
|
}
|
|
},
|
|
_get_cookie:function(check_name){
|
|
// first we'll split this cookie up into name/value pairs
|
|
// note: document.cookie only returns name=value, not the other components
|
|
var a_all_cookies = document.cookie.split( ';' );
|
|
var a_temp_cookie = '';
|
|
var cookie_name = '';
|
|
var cookie_value = '';
|
|
var b_cookie_found = false; // set boolean t/f default f
|
|
|
|
for (var i = 0; i < a_all_cookies.length; i++ ){
|
|
// now we'll split apart each name=value pair
|
|
a_temp_cookie = a_all_cookies[i].split( '=' );
|
|
|
|
// and trim left/right whitespace while we're at it
|
|
cookie_name = a_temp_cookie[0].replace(/^\s+|\s+$/g, '');
|
|
|
|
// if the extracted name matches passed check_name
|
|
if (cookie_name == check_name ){
|
|
b_cookie_found = true;
|
|
// we need to handle case where cookie has no value but exists (no = sign, that is):
|
|
if ( a_temp_cookie.length > 1 ){
|
|
cookie_value = unescape( a_temp_cookie[1].replace(/^\s+|\s+$/g, '') );
|
|
}
|
|
// note that in cases where cookie is initialized but no value, null is returned
|
|
return cookie_value;
|
|
}
|
|
a_temp_cookie = null;
|
|
cookie_name = '';
|
|
}
|
|
if ( !b_cookie_found ){
|
|
return null;
|
|
}
|
|
return null;
|
|
},
|
|
get:function(name){
|
|
if(name && window.JSON){
|
|
var json = this._get_cookie(name);
|
|
if(!json)
|
|
return null;
|
|
return webix.DataDriver.json.toObject(unescape(json));
|
|
}else
|
|
return null;
|
|
},
|
|
remove:function(name, domain){
|
|
if(name && this._get_cookie(name))
|
|
document.cookie = name + "=" + (( domain ) ? ";domain=" + domain : "") + ";expires=Thu, 01-Jan-1970 00:00:01 GMT";
|
|
},
|
|
clear:function(domain){
|
|
var cookies = document.cookie.split(";");
|
|
for (var i = 0; i < cookies.length; i++)
|
|
document.cookie = /^[^=]+/.exec(cookies[i])[0] + "=" + (( domain ) ? ";domain=" + domain : "") + ";expires=Thu, 01-Jan-1970 00:00:01 GMT";
|
|
}
|
|
};
|
|
|
|
webix.DataState = {
|
|
getState:function(){
|
|
var cols_n = this.config.columns.length;
|
|
var columns = this.config.columns;
|
|
var settings = {
|
|
ids:[],
|
|
size:[],
|
|
select:this.getSelectedId(true),
|
|
scroll:this.getScrollState()
|
|
};
|
|
for(var i = 0; i < cols_n; i++){
|
|
settings.ids.push(columns[i].id);
|
|
settings.size.push(columns[i].width);
|
|
}
|
|
|
|
if(this._last_sorted){
|
|
settings.sort={
|
|
id:this._last_sorted,
|
|
dir:this._last_order
|
|
};
|
|
}
|
|
if (this._filter_elements) {
|
|
var filter = {};
|
|
var any_filter = 0;
|
|
for (var key in this._filter_elements) {
|
|
if (this._hidden_column_hash[key]) continue;
|
|
|
|
var f = this._filter_elements[key];
|
|
f[1].value = filter[key] = f[2].getValue(f[0]);
|
|
any_filter = 1;
|
|
}
|
|
if (any_filter)
|
|
settings.filter=filter;
|
|
}
|
|
|
|
settings.hidden = [];
|
|
for (var key in this._hidden_column_hash)
|
|
settings.hidden.push(key);
|
|
|
|
return settings;
|
|
},
|
|
setState:function(obj){
|
|
var columns = this.config.columns;
|
|
if(!obj) return;
|
|
|
|
this._last_sorted = null;
|
|
this.blockEvent();
|
|
|
|
if (obj.hidden){
|
|
var hihash = {};
|
|
for (var i=0; i<obj.hidden.length; i++){
|
|
hihash[obj.hidden[i]] = true;
|
|
if(!this._hidden_column_order.length)
|
|
this.hideColumn(obj.hidden[i]);
|
|
}
|
|
|
|
if(this._hidden_column_order.length){
|
|
for (var i=0; i<this._hidden_column_order.length; i++){
|
|
var hikey = this._hidden_column_order[i];
|
|
if (!!hihash[hikey] == !this._hidden_column_hash[hikey])
|
|
this.hideColumn(hikey, !!hihash[hikey]);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (obj.ids){
|
|
var reorder = false;
|
|
var cols = this.config.columns;
|
|
for (var i=0; i<cols.length; i++)
|
|
if (cols[i].id != obj.ids[i])
|
|
reorder = true;
|
|
if (reorder){
|
|
for (var i=0; i<obj.ids.length; i++)
|
|
cols[i] = this.getColumnConfig(obj.ids[i]) || cols[i];
|
|
this.refreshColumns();
|
|
}
|
|
}
|
|
|
|
if (obj.size){
|
|
var cols_n = Math.min(obj.size.length, columns.length);
|
|
for(var i = 0; i < cols_n; i++){
|
|
if(columns[i] && columns[i].width != obj.size[i])
|
|
this._setColumnWidth( i, obj.size[i], true);
|
|
}
|
|
}
|
|
|
|
if (obj.filter){
|
|
for (var key in this._filter_elements){
|
|
var f = this._filter_elements[key];
|
|
f[2].setValue(f[0], "");
|
|
}
|
|
}
|
|
|
|
this.unblockEvent();
|
|
this._updateColsSizeSettings(true);
|
|
this.callEvent("onStructureUpdate", []);
|
|
|
|
if(obj.sort){
|
|
var column = columns[this.getColumnIndex(obj.sort.id)];
|
|
if (column)
|
|
this._sort(obj.sort.id, obj.sort.dir, column.sort);
|
|
}
|
|
|
|
if (obj.filter){
|
|
for (var key in obj.filter) {
|
|
var value = obj.filter[key];
|
|
if (!value) continue;
|
|
|
|
if (!this._filter_elements[key]) continue;
|
|
var f = this._filter_elements[key];
|
|
f[2].setValue(f[0], value);
|
|
var contentid = f[1].contentId;
|
|
if (contentid)
|
|
this._active_headers[contentid].value = value;
|
|
}
|
|
this.filterByAll();
|
|
}
|
|
|
|
if (obj.select && this.select){
|
|
var select = obj.select;
|
|
this.unselect();
|
|
for (var i = 0; i < select.length; i++)
|
|
if (!select[i].row || this.exists(select[i].row))
|
|
this._select(select[i], true);
|
|
}
|
|
|
|
if(obj.scroll)
|
|
this.scrollTo(obj.scroll.x, obj.scroll.y);
|
|
}
|
|
};
|
|
|
|
webix.extend(webix.ui.datatable, webix.DataState);
|
|
|
|
|
|
(function(){
|
|
var t = webix.Touch = {
|
|
config:{
|
|
longTouchDelay:1000,
|
|
scrollDelay:150,
|
|
gravity:500,
|
|
deltaStep:30,
|
|
speed:"0ms",
|
|
finish:1500,
|
|
ellastic:true
|
|
},
|
|
limit:function(value){
|
|
t._limited = value !== false;
|
|
},
|
|
disable:function(){
|
|
t._disabled = true;
|
|
},
|
|
enable:function(){
|
|
t._disabled = false;
|
|
},
|
|
$init:function(){
|
|
t.$init = function(){};
|
|
|
|
webix.event(document.body, mouse.down, t._touchstart);
|
|
webix.event(document.body, mouse.move, t._touchmove);
|
|
webix.event(document.body, mouse.up, t._touchend);
|
|
|
|
webix.event(document.body,"dragstart",function(e){
|
|
return webix.html.preventEvent(e);
|
|
});
|
|
webix.event(document.body,"touchstart",function(e){
|
|
if (t._disabled || t._limited) return;
|
|
//fast click mode for iOS
|
|
//To have working form elements Android must not block event - so there are no fast clicks for Android
|
|
//Selects still don't work with fast clicks
|
|
if (webix.env.isSafari) {
|
|
var tag = e.srcElement.tagName.toLowerCase();
|
|
if (tag == "input" || tag == "textarea" || tag == "select" || tag=="label")
|
|
return true;
|
|
|
|
t._fire_fast_event = true;
|
|
return webix.html.preventEvent(e);
|
|
}
|
|
});
|
|
|
|
t._clear_artefacts();
|
|
t._scroll = [null, null];
|
|
t.$active = true;
|
|
},
|
|
_clear_artefacts:function(){
|
|
t._start_context = t._current_context = t._prev_context = t._scroll_context = null;
|
|
t._scroll_mode = t._scroll_node = t._scroll_stat = this._long_touched = null;
|
|
//webix.html.remove(t._scroll);
|
|
//t._scroll = [null, null];
|
|
t._delta = { _x_moment:0, _y_moment:0, _time:0 };
|
|
|
|
if (t._css_button_remove){
|
|
webix.html.removeCss(t._css_button_remove,"webix_touch");
|
|
t._css_button_remove = null;
|
|
}
|
|
|
|
window.clearTimeout(t._long_touch_timer);
|
|
t._was_not_moved = true;
|
|
t._axis_x = true;
|
|
t._axis_y = true;
|
|
if (!t._active_transion)
|
|
t._scroll_end();
|
|
},
|
|
_touchend:function(e){
|
|
if (t._start_context) {
|
|
if (!t._scroll_mode) {
|
|
if (!this._long_touched) {
|
|
if (t._axis_y && !t._axis_x) {
|
|
t._translate_event("onSwipeX");
|
|
} else if (t._axis_x && !t._axis_y) {
|
|
t._translate_event("onSwipeY");
|
|
} else {
|
|
if (webix.env.isSafari && t._fire_fast_event) { //need to test for mobile ff and blackbery
|
|
t._fire_fast_event = false;
|
|
var target = t._start_context.target;
|
|
|
|
//dark iOS magic, without delay it can skip repainting
|
|
webix.delay(function () {
|
|
var click_event = document.createEvent('MouseEvents');
|
|
click_event.initEvent('click', true, true);
|
|
target.dispatchEvent(click_event);
|
|
});
|
|
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
|
|
|
|
var temp = t._get_matrix(t._scroll_node);
|
|
var x = temp.e;
|
|
var y = temp.f;
|
|
var finish = t.config.finish;
|
|
|
|
var delta = t._get_delta(e, true);
|
|
var view = webix.$$(t._scroll_node);
|
|
|
|
var gravity = (view && view.$scroll ? view.$scroll.gravity : t.config.gravity);
|
|
if (delta._time) {
|
|
var nx = x + gravity * delta._x_moment / delta._time;
|
|
var ny = y + gravity * delta._y_moment / delta._time;
|
|
|
|
var cnx = t._scroll[0] ? t._correct_minmax(nx, false, false, t._scroll_stat.dx, t._scroll_stat.px) : x;
|
|
var cny = t._scroll[1] ? t._correct_minmax(ny, false, false, t._scroll_stat.dy, t._scroll_stat.py) : y;
|
|
|
|
|
|
var size = Math.max(Math.abs(cnx - x), Math.abs(cny - y));
|
|
if (size < 150)
|
|
finish = finish * size / 150;
|
|
|
|
if (cnx != x || cny != y)
|
|
finish = Math.round(finish * Math.max((cnx - x) / (nx - x), (cny - y) / (ny - y)));
|
|
|
|
var result = {e: cnx, f: cny};
|
|
|
|
|
|
var view = webix.$$(t._scroll_node);
|
|
if (view && view.adjustScroll)
|
|
view.adjustScroll(result);
|
|
|
|
|
|
//finish = Math.max(100,(t._fast_correction?100:finish));
|
|
finish = Math.max(100, finish);
|
|
|
|
|
|
if (x != result.e || y != result.f) {
|
|
t._set_matrix(t._scroll_node, result.e, result.f, finish + "ms");
|
|
if (t._scroll_master)
|
|
t._scroll_master._sync_scroll(result.e, result.f, finish + "ms");
|
|
t._set_scroll(result.e, result.f, finish + "ms");
|
|
} else {
|
|
t._scroll_end();
|
|
}
|
|
} else
|
|
t._scroll_end();
|
|
}
|
|
t._translate_event("onTouchEnd");
|
|
t._clear_artefacts();
|
|
}
|
|
},
|
|
_touchmove:function(e){
|
|
if (!t._scroll_context || !t._start_context) return;
|
|
|
|
var delta = t._get_delta(e);
|
|
t._translate_event("onTouchMove");
|
|
|
|
if (t._scroll_mode){
|
|
t._set_scroll_pos(delta);
|
|
} else {
|
|
t._axis_x = t._axis_check(delta._x, "x", t._axis_x);
|
|
t._axis_y = t._axis_check(delta._y, "y", t._axis_y);
|
|
if (t._scroll_mode){
|
|
var view = t._get_event_view("onBeforeScroll", true);
|
|
if (view){
|
|
var data = {};
|
|
view.callEvent("onBeforeScroll",[data]);
|
|
if (data.update){
|
|
t.config.speed = data.speed;
|
|
t.config.scale = data.scale;
|
|
}
|
|
}
|
|
t._init_scroller(delta); //apply scrolling
|
|
}
|
|
}
|
|
|
|
return webix.html.preventEvent(e);
|
|
},
|
|
_set_scroll_pos:function(){
|
|
if (!t._scroll_node) return;
|
|
var temp = t._get_matrix(t._scroll_node);
|
|
var be = temp.e, bf = temp.f;
|
|
var prev = t._prev_context || t._start_context;
|
|
|
|
var view = webix.$$(t._scroll_node);
|
|
var ellastic = (view&&view.$scroll)?view.$scroll.ellastic: t.config.ellastic;
|
|
if (t._scroll[0])
|
|
temp.e = t._correct_minmax( temp.e - prev.x + t._current_context.x , ellastic, temp.e, t._scroll_stat.dx, t._scroll_stat.px);
|
|
if (t._scroll[1])
|
|
temp.f = t._correct_minmax( temp.f - prev.y + t._current_context.y , ellastic, temp.f, t._scroll_stat.dy, t._scroll_stat.py);
|
|
|
|
t._set_matrix(t._scroll_node, temp.e, temp.f, "0ms");
|
|
if (t._scroll_master)
|
|
t._scroll_master._sync_scroll(temp.e, temp.f, "0ms");
|
|
t._set_scroll(temp.e, temp.f, "0ms");
|
|
},
|
|
_set_scroll:function(dx, dy, speed){
|
|
|
|
var edx = t._scroll_stat.px/t._scroll_stat.dx * -dx;
|
|
var edy = t._scroll_stat.py/t._scroll_stat.dy * -dy;
|
|
if (t._scroll[0])
|
|
t._set_matrix(t._scroll[0], edx, 0 ,speed);
|
|
if (t._scroll[1])
|
|
t._set_matrix(t._scroll[1], 0, edy ,speed);
|
|
},
|
|
scrollTo:function(node, x, y, speed){
|
|
t._set_matrix(node,x,y,speed);
|
|
},
|
|
_set_matrix:function(node, xv, yv, speed){
|
|
if(!t._in_anim_frame && window.setAnimationFrame){
|
|
window.setAnimationFrame(function(){
|
|
t._in_anim_frame = true;
|
|
return t._set_matrix(node, xv, yv, speed);
|
|
});
|
|
}
|
|
t._in_anim_frame = null;
|
|
t._active_transion = true;
|
|
if (node){
|
|
var trans = t.config.translate || webix.env.translate;
|
|
node.style[webix.env.transform] = trans+"("+Math.round(xv)+"px, "+Math.round(yv)+"px"+((trans=="translate3d")?", 0":"")+")";
|
|
node.style[webix.env.transitionDuration] = speed;
|
|
}
|
|
},
|
|
_get_matrix:function(node){
|
|
var matrix = window.getComputedStyle(node)[webix.env.transform];
|
|
var tmatrix;
|
|
|
|
if (matrix == "none")
|
|
tmatrix = {e:0, f:0};
|
|
else {
|
|
if(window.WebKitCSSMatrix)
|
|
tmatrix = new WebKitCSSMatrix(matrix);
|
|
else if (window.MSCSSMatrix)
|
|
tmatrix = new MSCSSMatrix(matrix);
|
|
else {
|
|
// matrix(1, 0, 0, 1, 0, 0) --> 1, 0, 0, 1, 0, 0
|
|
var _tmatrix = matrix.replace(/(matrix\()(.*)(\))/gi, "$2");
|
|
// 1, 0, 0, 1, 0, 0 --> 1,0,0,1,0,0
|
|
_tmatrix = _tmatrix.replace(/\s/gi, "");
|
|
_tmatrix = _tmatrix.split(',');
|
|
|
|
var tmatrix = {};
|
|
var tkey = ['a', 'b', 'c', 'd', 'e', 'f'];
|
|
for(var i=0; i<tkey.length; i++){
|
|
tmatrix[tkey[i]] = parseInt(_tmatrix[i], 10);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (t._scroll_master)
|
|
t._scroll_master._sync_pos(tmatrix);
|
|
|
|
return tmatrix;
|
|
},
|
|
_correct_minmax:function(value, allow, current, dx, px){
|
|
if (value === current) return value;
|
|
|
|
var delta = Math.abs(value-current);
|
|
var sign = delta/(value-current);
|
|
// t._fast_correction = true;
|
|
|
|
|
|
if (value>0) return allow?(current + sign*Math.sqrt(delta)):0;
|
|
|
|
var max = dx - px;
|
|
if (max + value < 0)
|
|
return allow?(current - Math.sqrt(-(value-current))):-max;
|
|
|
|
// t._fast_correction = false;
|
|
return value;
|
|
},
|
|
_init_scroll_node:function(node){
|
|
if (!node.scroll_enabled){
|
|
node.scroll_enabled = true;
|
|
node.parentNode.style.position="relative";
|
|
var prefix = webix.env.cssPrefix;
|
|
node.style.cssText += prefix+"transition: "+prefix+"transform; "+prefix+"user-select:none; "+prefix+"transform-style:flat;";
|
|
node.addEventListener(webix.env.transitionEnd,t._scroll_end,false);
|
|
}
|
|
},
|
|
_init_scroller:function(delta){
|
|
if (t._scroll_mode.indexOf("x") != -1)
|
|
t._scroll[0] = t._create_scroll("x", t._scroll_stat.dx, t._scroll_stat.px, "width");
|
|
if (t._scroll_mode.indexOf("y") != -1)
|
|
t._scroll[1] = t._create_scroll("y", t._scroll_stat.dy, t._scroll_stat.py, "height");
|
|
|
|
t._init_scroll_node(t._scroll_node);
|
|
window.setTimeout(t._set_scroll_pos,1);
|
|
},
|
|
_create_scroll:function(mode, dy, py, dim){
|
|
if (dy - py <2){
|
|
var matrix = t._get_matrix(t._scroll_node);
|
|
var e = (mode=="y"?matrix.e:0);
|
|
var f = (mode=="y"?0:matrix.f);
|
|
if (!t._scroll_master)
|
|
t._set_matrix(t._scroll_node, e, f, "0ms");
|
|
t._scroll_mode = t._scroll_mode.replace(mode,"");
|
|
return "";
|
|
}
|
|
|
|
var scroll = webix.html.create("DIV", {
|
|
"class":"webix_scroll_"+mode
|
|
},"");
|
|
|
|
scroll.style[dim] = Math.max((py*py/dy-7),10) +"px";
|
|
t._scroll_node.parentNode.appendChild(scroll);
|
|
|
|
return scroll;
|
|
},
|
|
_axis_check:function(value, mode, old){
|
|
if (value > t.config.deltaStep){
|
|
if (t._was_not_moved){
|
|
t._long_move(mode);
|
|
t._locate(mode);
|
|
if ((t._scroll_mode||"").indexOf(mode) == -1) t._scroll_mode = "";
|
|
}
|
|
return false;
|
|
}
|
|
return old;
|
|
},
|
|
_scroll_end:function(){
|
|
//sending event to the owner of the scroll only
|
|
var result,state,view;
|
|
view = webix.$$(t._scroll_node||this);
|
|
if (view){
|
|
if (t._scroll_node)
|
|
result = t._get_matrix(t._scroll_node);
|
|
else if(view.getScrollState){
|
|
state = view.getScrollState();
|
|
result = {e:state.x, f:state.y};
|
|
}
|
|
webix.callEvent("onAfterScroll", [result]);
|
|
if (view.callEvent)
|
|
view.callEvent("onAfterScroll",[result]);
|
|
}
|
|
if (!t._scroll_mode){
|
|
webix.html.remove(t._scroll);
|
|
t._scroll = [null, null];
|
|
}
|
|
t._active_transion = false;
|
|
},
|
|
_long_move:function(mode){
|
|
window.clearTimeout(t._long_touch_timer);
|
|
t._was_not_moved = false;
|
|
},
|
|
_stop_old_scroll:function(e){
|
|
if (t._scroll[0] || t._scroll[1]){
|
|
t._stop_scroll(e, t._scroll[0]?"x":"y");
|
|
}else
|
|
return true;
|
|
},
|
|
_touchstart :function(e){
|
|
var target = e.target || event.srcElement;
|
|
|
|
|
|
if (t._disabled || (target.tagName&&target.tagName.toLowerCase() == "textarea" && target.offsetHeight<target.scrollHeight)) return;
|
|
t._long_touched = null;
|
|
t._scroll_context = t._start_context = mouse.context(e);
|
|
|
|
// in "limited" mode we should have possibility to use slider
|
|
var element = webix.$$(e);
|
|
|
|
if (t._limited && !t._is_scroll() && !(element && element.$touchCapture)){
|
|
t._scroll_context = null;
|
|
}
|
|
|
|
|
|
|
|
t._translate_event("onTouchStart");
|
|
|
|
if (t._stop_old_scroll(e))
|
|
t._long_touch_timer = window.setTimeout(t._long_touch, t.config.longTouchDelay);
|
|
|
|
if (element && element.touchable && (!target.className || target.className.indexOf("webix_view")!==0)){
|
|
t._css_button_remove = element.getNode(e);
|
|
webix.html.addCss(t._css_button_remove,"webix_touch");
|
|
}
|
|
|
|
},
|
|
_long_touch:function(e){
|
|
if(t._start_context){
|
|
t._translate_event("onLongTouch");
|
|
webix.callEvent("onClick", [t._start_context]);
|
|
t._long_touched = true;
|
|
//t._clear_artefacts();
|
|
}
|
|
},
|
|
_stop_scroll:function(e, stop_mode){
|
|
t._locate(stop_mode);
|
|
var scroll = t._scroll[0]||t._scroll[1];
|
|
if (scroll){
|
|
var view = t._get_event_view("onBeforeScroll", true);
|
|
if (view)
|
|
view.callEvent("onBeforeScroll", [t._start_context,t._current_context]);
|
|
}
|
|
if (scroll && (!t._scroll_node || scroll.parentNode != t._scroll_node.parentNode)){
|
|
t._clear_artefacts();
|
|
t._scroll_end();
|
|
t._start_context = mouse.context(e);
|
|
}
|
|
t._touchmove(e);
|
|
},
|
|
_get_delta:function(e, ch){
|
|
t._prev_context = t._current_context;
|
|
t._current_context = mouse.context(e);
|
|
|
|
t._delta._x = Math.abs(t._start_context.x - t._current_context.x);
|
|
t._delta._y = Math.abs(t._start_context.y - t._current_context.y);
|
|
|
|
if (t._prev_context){
|
|
if (t._current_context.time - t._prev_context.time < t.config.scrollDelay){
|
|
t._delta._x_moment = t._delta._x_moment/1.3+t._current_context.x - t._prev_context.x;
|
|
t._delta._y_moment = t._delta._y_moment/1.3+t._current_context.y - t._prev_context.y;
|
|
}
|
|
else {
|
|
t._delta._y_moment = t._delta._x_moment = 0;
|
|
}
|
|
t._delta._time = t._delta._time/1.3+(t._current_context.time - t._prev_context.time);
|
|
}
|
|
|
|
return t._delta;
|
|
},
|
|
_get_sizes:function(node){
|
|
t._scroll_stat = {
|
|
dx:node.offsetWidth,
|
|
dy:node.offsetHeight,
|
|
px:node.parentNode.offsetWidth,
|
|
py:node.parentNode.offsetHeight
|
|
};
|
|
},
|
|
_is_scroll:function(locate_mode){
|
|
var node = t._start_context.target;
|
|
if (!webix.env.touch && !webix.env.transition && !webix.env.transform) return null;
|
|
while(node && node.tagName!="BODY"){
|
|
if(node.getAttribute){
|
|
var mode = node.getAttribute("touch_scroll");
|
|
if (mode && (!locate_mode || mode.indexOf(locate_mode)!=-1))
|
|
return [node, mode];
|
|
}
|
|
node = node.parentNode;
|
|
}
|
|
return null;
|
|
},
|
|
_locate:function(locate_mode){
|
|
var state = this._is_scroll(locate_mode);
|
|
if (state){
|
|
t._scroll_mode = state[1];
|
|
t._scroll_node = state[0];
|
|
t._get_sizes(state[0]);
|
|
}
|
|
return state;
|
|
},
|
|
_translate_event:function(name){
|
|
webix.callEvent(name, [t._start_context,t._current_context]);
|
|
var view = t._get_event_view(name);
|
|
if (view)
|
|
view.callEvent(name, [t._start_context,t._current_context]);
|
|
},
|
|
_get_event_view:function(name, active){
|
|
var view = webix.$$(active ? t._scroll_node : t._start_context);
|
|
if(!view) return null;
|
|
|
|
while (view){
|
|
if (view.hasEvent&&view.hasEvent(name))
|
|
return view;
|
|
view = view.getParentView();
|
|
}
|
|
|
|
return null;
|
|
},
|
|
_get_context:function(e){
|
|
if (!e.touches[0]) {
|
|
var temp = t._current_context;
|
|
temp.time = new Date();
|
|
return temp;
|
|
}
|
|
|
|
return {
|
|
target:e.target,
|
|
x:e.touches[0].pageX,
|
|
y:e.touches[0].pageY,
|
|
time:new Date()
|
|
};
|
|
},
|
|
_get_context_m:function(e){
|
|
return {
|
|
target:e.target || e.srcElement,
|
|
x:e.pageX,
|
|
y:e.pageY,
|
|
time:new Date()
|
|
};
|
|
}
|
|
};
|
|
|
|
|
|
webix.ready(function(){
|
|
if (webix.env.touch){
|
|
t.$init();
|
|
//not full screen mode
|
|
if (document.body.className.indexOf("webix_full_screen") == -1)
|
|
t.limit(true);
|
|
|
|
if (window.MSCSSMatrix)
|
|
webix.html.addStyle(".webix_view{ -ms-touch-action: none; }");
|
|
}
|
|
});
|
|
|
|
|
|
var mouse = webix.env.mouse = { down:"mousedown", up:"mouseup",
|
|
move:"mousemove", context:t._get_context_m };
|
|
|
|
if (window.navigator.pointerEnabled){
|
|
mouse.down = "pointerdown";
|
|
mouse.move = "pointermove";
|
|
mouse.up = "pointerup";
|
|
} else if (window.navigator.msPointerEnabled){
|
|
mouse.down = "MSPointerDown";
|
|
mouse.move = "MSPointerMove";
|
|
mouse.up = "MSPointerUp";
|
|
} else if (webix.env.touch){
|
|
mouse.down = "touchstart";
|
|
mouse.move = "touchmove";
|
|
mouse.up = "touchend";
|
|
mouse.context = t._get_context;
|
|
}
|
|
|
|
|
|
})();
|
|
|
|
|
|
|
|
webix.attachEvent("onDataTable", function(table, config){
|
|
if (webix.env.touch){
|
|
webix.Touch.$init();
|
|
config.scrollSize = 0;
|
|
webix.extend(table, (config.prerender===true)?table._touchNative:table._touch);
|
|
|
|
// needed to show datatable scroll
|
|
if(webix.Touch._disabled)
|
|
webix.Touch.limit();
|
|
|
|
table.defaults.scrollAlignY = false;
|
|
|
|
table._body.setAttribute("touch_scroll","xy");
|
|
|
|
table.$ready.push(function(){
|
|
var scrollMode = "";
|
|
var config = this._settings;
|
|
if (!config.autowidth && config.scrollX !== false)
|
|
scrollMode += "x";
|
|
if (!config.autoheight && config.scrollY !== false)
|
|
scrollMode += "y";
|
|
this._body.setAttribute("touch_scroll", scrollMode);
|
|
});
|
|
|
|
webix.Touch._init_scroll_node(table._body.childNodes[1].firstChild);
|
|
webix.Touch._set_matrix(table._body.childNodes[1].firstChild, 0,0,"0ms");
|
|
table._sync_scroll(0,0,"0ms");
|
|
}
|
|
});
|
|
|
|
webix.extend(webix.ui.datatable, {
|
|
_touchNative:{
|
|
_scrollTo_touch:function(x,y){
|
|
webix.Touch._set_matrix(this._body.childNodes[1].firstChild, 0,0,"0ms");
|
|
this._sync_scroll(x,y,"0ms");
|
|
},
|
|
_getScrollState_touch:function(){
|
|
var temp = webix.Touch._get_matrix(this._body.childNodes[1].firstChild);
|
|
return { x : -temp.e, y : -temp.f };
|
|
},
|
|
$init:function(){
|
|
this.attachEvent("onBeforeScroll", function(){
|
|
webix.Touch._scroll_node = this._body.childNodes[1].firstChild;
|
|
webix.Touch._get_sizes(webix.Touch._scroll_node);
|
|
webix.Touch._scroll_master = this;
|
|
});
|
|
this.attachEvent("onTouchEnd", function(){
|
|
webix.Touch._scroll_master = null;
|
|
});
|
|
},
|
|
_sync_scroll:function(x,y,t){
|
|
if (this._settings.leftSplit)
|
|
webix.Touch._set_matrix(this._body.childNodes[0].firstChild,0,y,t);
|
|
if (this._settings.rightSplit)
|
|
webix.Touch._set_matrix(this._body.childNodes[2].firstChild,0,y,t);
|
|
if (this._settings.header)
|
|
webix.Touch._set_matrix(this._header.childNodes[1].firstChild,x,0,t);
|
|
if (this._settings.footer)
|
|
webix.Touch._set_matrix(this._footer.childNodes[1].firstChild,x,0,t);
|
|
|
|
this.callEvent("onSyncScroll", [x,y,t]);
|
|
},
|
|
_sync_pos:function(){}
|
|
},
|
|
_touch:{
|
|
_scrollTo_touch:function(x,y){
|
|
webix.delay(function(){
|
|
this.callEvent("onAfterScroll", [{ e: -x, f: -y}]);
|
|
}, this);
|
|
|
|
},
|
|
$scroll:{
|
|
gravity:0,
|
|
elastic:false
|
|
},
|
|
$init:function(){
|
|
this.attachEvent("onBeforeScroll", function(){
|
|
var t = webix.Touch;
|
|
t._scroll_node = this._body.childNodes[1].firstChild;
|
|
t._get_sizes(t._scroll_node);
|
|
t._scroll_stat.dy = this._dtable_height;
|
|
t._scroll_master = this;
|
|
|
|
});
|
|
this.attachEvent("onAfterScroll", function(result){
|
|
//onAfterScroll may be triggered by some non-touch related logic
|
|
if (!result) return;
|
|
|
|
var isScrollX = (this._scrollLeft != -result.e);
|
|
var isScrollY = (this._scrollTop != -result.f);
|
|
|
|
webix.Touch._scroll_master = null;
|
|
webix.Touch._fix_f = null;
|
|
|
|
this._scrollTop = 0;
|
|
|
|
//ipad can delay content rendering if 3d transformation applied
|
|
//switch back to 2d
|
|
var temp = webix.Touch.config.translate;
|
|
webix.Touch.config.translate = "translate";
|
|
this._sync_scroll(result.e, 0, "0ms");
|
|
webix.Touch.config.translate = temp;
|
|
|
|
this._scrollLeft = - result.e;
|
|
this._scrollTop = -result.f;
|
|
|
|
this.render();
|
|
|
|
if(isScrollX)
|
|
this.callEvent("onScrollX",[]);
|
|
if(isScrollY)
|
|
this.callEvent("onScrollY",[]);
|
|
|
|
return false;
|
|
});
|
|
},
|
|
_sync_scroll:function(x,y,t){
|
|
y += this._scrollTop;
|
|
webix.Touch._set_matrix(this._body.childNodes[1].firstChild, x, y, t);
|
|
if (this._settings.leftSplit)
|
|
webix.Touch._set_matrix(this._body.childNodes[0].firstChild,0,y,t);
|
|
if (this._settings.rightSplit)
|
|
webix.Touch._set_matrix(this._body.childNodes[2].firstChild,0,y,t);
|
|
if (this._settings.header)
|
|
webix.Touch._set_matrix(this._header.childNodes[1].firstChild,x,0,t);
|
|
if (this._settings.footer)
|
|
webix.Touch._set_matrix(this._footer.childNodes[1].firstChild,x,0,t);
|
|
|
|
this.callEvent("onSyncScroll", [x,y,t]);
|
|
},
|
|
_sync_pos:function(matrix){
|
|
matrix.f -= this._scrollTop;
|
|
|
|
}
|
|
}
|
|
});
|
|
webix.extend(webix.ui.datatable, {
|
|
$init:function(){
|
|
this.data.attachEvent("onStoreUpdated", webix.bind(function(id){
|
|
if (!id) this._adjustColumns();
|
|
}, this));
|
|
this.attachEvent("onStructureLoad", this._adjustColumns);
|
|
|
|
this.attachEvent("onStructureUpdate", this._resizeColumns);
|
|
this.attachEvent("onColumnResize", function(a,b,c,user){
|
|
if (user)
|
|
this._resizeColumns();
|
|
});
|
|
this.attachEvent("onResize", this._resizeColumns);
|
|
},
|
|
_adjustColumns:function(){
|
|
if (!this.count()) return;
|
|
|
|
var resize = false;
|
|
var cols = this._columns;
|
|
for (var i = 0; i < cols.length; i++)
|
|
if (cols[i].adjust)
|
|
resize = this._adjustColumn(i, cols[i].adjust, true) || resize;
|
|
|
|
if (resize)
|
|
this._updateColsSizeSettings(true);
|
|
},
|
|
_resizeColumns:function(){
|
|
var cols = this._settings.columns;
|
|
var fill = [];
|
|
var summ = 0;
|
|
|
|
if (cols && !this._settings.autowidth)
|
|
for (var i = 0; i < cols.length; i++){
|
|
var colfil = cols[i].fillspace;
|
|
if (colfil){
|
|
fill[i] = colfil;
|
|
summ += colfil*1 || 1;
|
|
}
|
|
}
|
|
|
|
if (summ)
|
|
this._fillColumnSize(fill, summ);
|
|
},
|
|
_fillColumnSize:function(fill, summ){
|
|
var cols = this._settings.columns;
|
|
if (!cols) return;
|
|
|
|
var width = this._content_width - this._scrollSizeY;
|
|
var resize = false;
|
|
|
|
if (width>0){
|
|
for (var i=0; i<cols.length; i++)
|
|
if (!fill[i]) width -= (cols[i].width || this.config.columnWidth);
|
|
|
|
for (var i = 0; i < fill.length; i++)
|
|
if (fill[i]){
|
|
var request = Math.min(width, Math.round(width * fill[i]/summ));
|
|
resize = this._setColumnWidth(i, request, true) || resize;
|
|
width = width - cols[i].width;
|
|
summ = summ - fill[i];
|
|
}
|
|
|
|
if (resize)
|
|
this._updateColsSizeSettings(true);
|
|
}
|
|
},
|
|
_getColumnConfigSize:function(ind, headers){
|
|
var d = webix.html.create("DIV",{"class":"webix_view webix_table_cell webix_measure_size webix_cell"},"");
|
|
d.style.cssText = "width:1px; visibility:hidden; position:absolute; top:0px; left:0px; overflow:hidden;";
|
|
document.body.appendChild(d);
|
|
|
|
var config = this._settings.columns[ind];
|
|
var max = -Infinity;
|
|
|
|
//iterator other all loaded data is required
|
|
if (headers != "header")
|
|
this.data.each(function(obj){
|
|
if (obj){
|
|
var text = this._getValue(obj, config, 0);
|
|
d.innerHTML = text;
|
|
max = Math.max(d.scrollWidth, max);
|
|
}
|
|
}, this);
|
|
|
|
if (headers && headers != "data"){
|
|
for (var i=0; i<config.header.length; i++){
|
|
var header = config.header[i];
|
|
if (header){
|
|
d.innerHTML = header.text;
|
|
max = Math.max(d.scrollWidth, max);
|
|
}
|
|
}
|
|
}
|
|
|
|
d = webix.html.remove(d);
|
|
//1px to compensate scrollWidth rounding
|
|
return max+1+(webix.env.isIE?webix.skin.$active.layoutPadding.space:0);
|
|
},
|
|
_adjustColumn:function(ind, headers, ignore){
|
|
if (ind >= 0){
|
|
var width = this._getColumnConfigSize(ind, headers);
|
|
return this._setColumnWidth(ind, width, ignore);
|
|
}
|
|
},
|
|
adjustColumn:function(id, headers){
|
|
this._adjustColumn(this.getColumnIndex(id), headers);
|
|
},
|
|
adjustRowHeight:function(id, silent){
|
|
var config = this.getColumnConfig(id);
|
|
var count = this.data.count();
|
|
|
|
var container;
|
|
var d = webix.html.create("DIV",{"class":"webix_table_cell webix_measure_size webix_cell"},"");
|
|
d.style.cssText = "width:"+config.width+"px; height:1px; visibility:hidden; position:absolute; top:0px; left:0px; overflow:hidden;";
|
|
this.$view.appendChild(d);
|
|
|
|
if (d.offsetHeight < 1){
|
|
//hidden container, height detection is broken
|
|
//reattach to the body
|
|
container = this.$view.cloneNode(true);
|
|
document.body.appendChild(container);
|
|
container.appendChild(d);
|
|
}
|
|
|
|
this.data.each(function(obj){
|
|
//in case of dyn. mode - this can be undefined
|
|
if (obj){
|
|
d.innerHTML = this._getValue(obj, config, 0);
|
|
obj.$height = Math.max(d.scrollHeight, this._settings.rowHeight);
|
|
}
|
|
}, this);
|
|
|
|
d = webix.html.remove(d);
|
|
if (container)
|
|
webix.html.remove(container);
|
|
|
|
if (!silent)
|
|
this.refresh();
|
|
}
|
|
});
|
|
webix.extend(webix.ui.datatable,{
|
|
|
|
math_setter:function(value){
|
|
if (value)
|
|
this._math_init();
|
|
return value;
|
|
},
|
|
|
|
_math_pref: '$',
|
|
|
|
_math_init: function() {
|
|
if(webix.env.strict) return;
|
|
|
|
this.data.attachEvent("onStoreUpdated", webix.bind(this._parse_row_math, this));
|
|
this.data.attachEvent("onStoreLoad", webix.bind(this._parse_math, this));
|
|
this.attachEvent("onStructureLoad", this._parse_math);
|
|
},
|
|
_parse_row_math:function(id, obj, action){
|
|
if (!id || (action=="delete" || action=="paint")) return;
|
|
|
|
if (action == "add")
|
|
this._exprs_by_columns(obj);
|
|
|
|
for (var i=0; i<this._columns.length; i++)
|
|
this._parse_cell_math(id, this._columns[i].id, action !== "add");
|
|
this._math_recalc = {};
|
|
},
|
|
_parse_cell_math: function(row, col, _inner_call) {
|
|
var item = this.getItem(row);
|
|
var value;
|
|
|
|
// if it's outer call we should use inputted value otherwise to take formula, not calculated value
|
|
if (_inner_call === true)
|
|
value = item[this._math_pref + col] || item[col];
|
|
else {
|
|
value = item[col];
|
|
this._math_recalc = {};
|
|
}
|
|
|
|
if (typeof value === "undefined" || value === null) return;
|
|
|
|
if (value.length > 0 && value.substr(0, 1) === '=') {
|
|
// calculate math value
|
|
if ((typeof(item[this._math_pref + col]) === 'undefined') || (_inner_call !== true))
|
|
item[this._math_pref + col] = item[col];
|
|
item[col] = this._calculate(value, row, col);
|
|
//this.updateItem(item);
|
|
} else {
|
|
// just a string
|
|
if (typeof(item[this._math_pref + col]) !== 'undefined')
|
|
delete item[this._math_pref + col];
|
|
// remove triggers if they were setted earlier
|
|
this._remove_old_triggers(row, col);
|
|
}
|
|
// recalculate depending cells
|
|
if (typeof(item.depends) !== 'undefined' && typeof(item.depends[col]) !== 'undefined') {
|
|
for (var i in item.depends[col]) {
|
|
var name = item.depends[col][i][0] + '__' + item.depends[col][i][1];
|
|
if (typeof(this._math_recalc[name]) === 'undefined') {
|
|
this._math_recalc[name] = true;
|
|
this._parse_cell_math(item.depends[col][i][0], item.depends[col][i][1], true);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
_set_original_value: function(row, col) {
|
|
var item = this.getItem(row);
|
|
if (typeof(item[this._math_pref + col]) !== 'undefined')
|
|
item[col] = item[this._math_pref + col];
|
|
},
|
|
|
|
_parse_math: function(){
|
|
if (!this._columns || !this.count()) return;
|
|
|
|
this._exprs_by_columns();
|
|
|
|
|
|
for (var j = 0; j < this._columns.length; j++){
|
|
var col = this.columnId(j);
|
|
this.data.each(function(obj){
|
|
this._parse_cell_math(obj.id, col);
|
|
}, this);
|
|
}
|
|
|
|
this._math_recalc = {};
|
|
},
|
|
|
|
_exprs_by_columns: function(row) {
|
|
for (var i = 0; i < this._columns.length; i++){
|
|
if (this._columns[i].math) {
|
|
var col = this.columnId(i);
|
|
var math = '=' + this._columns[i].math;
|
|
math = math.replace(/\$r/g, '#$r#');
|
|
math = math.replace(/\$c/g, '#$c#');
|
|
if (row)
|
|
row[col] = this._parse_relative_expr(math, row.id, col);
|
|
else
|
|
this.data.each(function(obj){
|
|
obj[col] = this._parse_relative_expr(math, obj.id, col);
|
|
}, this);
|
|
}
|
|
}
|
|
},
|
|
|
|
_parse_relative_expr: function(expr, row, col) {
|
|
return (webix.template(expr))({ '$r': row, '$c': col });
|
|
},
|
|
|
|
_get_calc_value: function(row, col) {
|
|
var item;
|
|
|
|
if (this.exists(row))
|
|
item = this.getItem(row);
|
|
else
|
|
return '#out_of_range';
|
|
|
|
var value = item[this._math_pref + col] || item[col] || 0;
|
|
value = value.toString();
|
|
if (value.substring(0, 1) !== '=')
|
|
// it's a string
|
|
return value;
|
|
else {
|
|
// TODO: check if value shouldn't be recalculated
|
|
// and return value calculated earlier
|
|
|
|
// calculate math expr value right now
|
|
if (typeof(item[this._math_pref + col]) === 'undefined')
|
|
item[this._math_pref + col] = item[col];
|
|
item[col] = this._calculate(value, row, col, true);
|
|
return item[col];
|
|
}
|
|
},
|
|
|
|
_calculate: function(value, row, col, _inner_call) {
|
|
// add coord in math trace to detect self-references
|
|
if (_inner_call === true) {
|
|
if (this._in_math_trace(row, col))
|
|
return '#selfreference';
|
|
} else
|
|
this._start_math_trace();
|
|
this._to_math_trace(row, col);
|
|
|
|
var item = this.getItem(row);
|
|
value = value.substring(1);
|
|
|
|
// get operations list
|
|
var operations = this._get_operations(value);
|
|
var triggers = this._get_refs(value);
|
|
|
|
if (operations) {
|
|
value = this._replace_refs(value, triggers);
|
|
value = this._parse_args(value, operations);
|
|
} else {
|
|
value = this._replace_refs(value, triggers, true);
|
|
}
|
|
|
|
var exc = this._math_exception(value);
|
|
if (exc !== false)
|
|
return exc;
|
|
|
|
// remove from coord from trace when calculations were finished - it's important!
|
|
this._from_math_trace(row, col);
|
|
|
|
// process triggers to know which cells should be recalculated when one was changed
|
|
this._remove_old_triggers(row, col);
|
|
for (var i = 0; i < triggers.length; i++) {
|
|
this._add_trigger([row, col], triggers[i]);
|
|
}
|
|
var exc = this._math_exception(value);
|
|
if (exc !== false)
|
|
return exc;
|
|
|
|
// there aren't any operations here. returns number or value of another cell
|
|
if (!value) return value;
|
|
|
|
// process mathematical expression and getting final result
|
|
value = this._compute(value);
|
|
var exc = this._math_exception(value);
|
|
if (exc !== false)
|
|
return exc;
|
|
return value;
|
|
},
|
|
|
|
_get_operations: function(value) {
|
|
// gettings operations list (+-*/)
|
|
var splitter = /(\+|\-|\*|\/)/g;
|
|
var operations = value.replace(/\[[^)]*?\]/g,"").match(splitter);
|
|
return operations;
|
|
},
|
|
|
|
/*! gets list of referencies in formula
|
|
**/
|
|
_get_refs: function(value) {
|
|
var reg = /\[([^\]]+),([^\]]+)\]/g;
|
|
var cells = value.match(reg);
|
|
if (cells === null) cells = [];
|
|
|
|
for (var i = 0; i < cells.length; i++) {
|
|
var cell = cells[i];
|
|
var tmp = cell;
|
|
cell = cell.substr(1, cell.length - 2);
|
|
cell = cell.split(',');
|
|
cell[0] = this._trim(cell[0]);
|
|
cell[1] = this._trim(cell[1]);
|
|
if (cell[0].substr(0, 1) === ':')
|
|
cell[0] = this.getIdByIndex(cell[0].substr(1));
|
|
if (cell[1].substr(0, 1) === ':')
|
|
cell[1] = this.columnId(cell[1].substr(1));
|
|
cell[2] = tmp;
|
|
cells[i] = cell;
|
|
}
|
|
|
|
return cells;
|
|
},
|
|
|
|
// replace given list of references by their values
|
|
_replace_refs: function(value, cells, clean) {
|
|
var dell = "(", delr = ")";
|
|
if (clean) dell = delr = "";
|
|
for (var i = 0; i < cells.length; i++) {
|
|
var cell = cells[i];
|
|
var cell_value = this._get_calc_value(cell[0], cell[1]);
|
|
if (isNaN(cell_value))
|
|
cell_value = '"'+cell_value+'"';
|
|
value = value.replace(cell[2], dell + cell_value + delr);
|
|
}
|
|
return value;
|
|
},
|
|
|
|
_parse_args: function(value, operations) {
|
|
var args = [];
|
|
for (var i = 0; i < operations.length; i++) {
|
|
var op = operations[i];
|
|
var temp = this._split_by(value, op);
|
|
args.push(temp[0]);
|
|
value = temp[1];
|
|
}
|
|
args.push(value);
|
|
|
|
//var reg = /^(-?\d|\.|\(|\))+$/;
|
|
for (var i = 0; i < args.length; i++) {
|
|
var arg = this._trim(args[i]);
|
|
// if (reg.test(arg) === false)
|
|
// return ''; //error
|
|
args[i] = arg;
|
|
}
|
|
|
|
var expr = "";
|
|
for (var i = 0; i < args.length - 1; i++) {
|
|
expr += args[i] + operations[i];
|
|
}
|
|
expr += args[args.length - 1];
|
|
return expr;
|
|
},
|
|
|
|
_compute: function(expr) {
|
|
try {
|
|
webix.temp_value = '';
|
|
expr = 'webix.temp_value = ' + expr;
|
|
eval(expr);
|
|
} catch(ex) {
|
|
webix.assert(false,"Math error in datatable<br>"+expr);
|
|
webix.temp_value = '';
|
|
}
|
|
var result = webix.temp_value;
|
|
webix.temp_value = null;
|
|
return result.toString();
|
|
},
|
|
|
|
_split_by: function(value, splitter) {
|
|
var pos = value.indexOf(splitter);
|
|
var before = value.substr(0, pos);
|
|
var after = value.substr(pos + 1);
|
|
return [before, after];
|
|
},
|
|
|
|
_trim: function(value) {
|
|
value = value.replace(/^ */g, '');
|
|
value = value.replace(/ *$/g, '');
|
|
return value;
|
|
},
|
|
|
|
_start_math_trace: function() {
|
|
this._math_trace = [];
|
|
},
|
|
_to_math_trace: function(row, col) {
|
|
this._math_trace[row + '__' + col] = true;
|
|
},
|
|
_from_math_trace: function(row, col) {
|
|
if (typeof(this._math_trace[row + '__' + col]) !== 'undefined')
|
|
delete this._math_trace[row + '__' + col];
|
|
},
|
|
_in_math_trace: function(row, col) {
|
|
if (typeof(this._math_trace[row + '__' + col]) !== 'undefined')
|
|
return true;
|
|
else
|
|
return false;
|
|
},
|
|
|
|
_add_trigger: function(depends, from) {
|
|
var item = this.getItem(from[0]);
|
|
if (typeof(item.depends) === 'undefined')
|
|
item.depends = {};
|
|
if (typeof(item.depends[from[1]]) === 'undefined')
|
|
item.depends[from[1]] = {};
|
|
item.depends[from[1]][depends[0] + '__' + depends[1]] = depends;
|
|
|
|
item = this.getItem(depends[0]);
|
|
if (typeof(item.triggers) === 'undefined')
|
|
item.triggers = {};
|
|
if (typeof(item.triggers[depends[1]]) === 'undefined')
|
|
item.triggers[depends[1]] = {};
|
|
item.triggers[depends[1]][from[0] + '__' + from[1]] = from;
|
|
},
|
|
|
|
_remove_old_triggers: function(row, col) {
|
|
if (!this.exists(row, col)) return;
|
|
var item = this.getItem(row, col);
|
|
if (typeof(item.triggers) === 'undefined') return;
|
|
for (var i in item.triggers[col]) {
|
|
var depend = item.triggers[col][i];
|
|
delete this.getItem(depend[0]).depends[depend[1]][row + '__' + col];
|
|
}
|
|
},
|
|
|
|
// check if exception syntax exists and returns exception text or false
|
|
_math_exception: function(value) {
|
|
var reg = /#\w+/;
|
|
var match = value.match(reg);
|
|
if (match !== null && match.length > 0)
|
|
return match[0];
|
|
return false;
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
webix.extend(webix.ui.datatable, {
|
|
|
|
/////////////////////////
|
|
// edit start //
|
|
/////////////////////////
|
|
_get_editor_type:function(id){
|
|
return this.getColumnConfig(id.column).editor;
|
|
},
|
|
getEditor:function(row, column){
|
|
if (!row)
|
|
return this._last_editor;
|
|
|
|
if (arguments.length == 1){
|
|
column = row.column;
|
|
row = row.row;
|
|
}
|
|
|
|
return ((this._editors[row]||{})[column]);
|
|
},
|
|
_for_each_editor:function(handler){
|
|
for (var row in this._editors){
|
|
var row_editors = this._editors[row];
|
|
for (var column in row_editors)
|
|
if (column!="$count")
|
|
handler.call(this, row_editors[column]);
|
|
}
|
|
},
|
|
_init_editor:function(id, type, show){
|
|
var row = id.row;
|
|
var column = id.column;
|
|
var col_settings = type.config = this.getColumnConfig(column);
|
|
//show it over cell
|
|
if (show !== false)
|
|
this.showCell(row, column);
|
|
|
|
var node = type.render();
|
|
|
|
if (type.$inline)
|
|
node = this._locateInput(id);
|
|
type.node = node;
|
|
|
|
var item = this.getItem(row);
|
|
var format = col_settings.editFormat;
|
|
|
|
var value;
|
|
if (this._settings.editMath)
|
|
value = item["$"+column];
|
|
value = value || item[column];
|
|
|
|
if (webix.isUndefined(value))
|
|
value="";
|
|
|
|
type.setValue(format?format(value):value, item);
|
|
type.value = item[column];
|
|
this._addEditor(id, type);
|
|
|
|
if (!type.$inline)
|
|
this._sizeToCell(id, node, true);
|
|
|
|
if (type.afterRender)
|
|
type.afterRender();
|
|
|
|
if (this._settings.liveValidation){
|
|
var evId = "webix_keyup_edit_"+this._settings.id+"_"+row+"_"+column;
|
|
webix.event(type.node, "keyup", this._bind_live_validation(id, this),{id: evId});
|
|
this.validateEditor(id);
|
|
}
|
|
|
|
return node;
|
|
},
|
|
_bind_live_validation:function(id, that){
|
|
return function(){
|
|
that.validateEditor(id);
|
|
};
|
|
},
|
|
_set_new_value:function(editor, new_value){
|
|
var parser = this.getColumnConfig(editor.column).editParse;
|
|
var item = this.getItem(editor.row);
|
|
|
|
item[editor.column] = parser?parser(new_value):new_value;
|
|
if (this._settings.editMath)
|
|
delete item["$"+editor.column];
|
|
return editor.row;
|
|
},
|
|
//register editor in collection
|
|
_addEditor:function(id, type, node){
|
|
var row_editors = this._editors[id.row]=this._editors[id.row]||{};
|
|
|
|
row_editors.$count = (row_editors.$count||0)+1;
|
|
|
|
type.row = id.row; type.column = id.column;
|
|
this._last_editor = row_editors[id.column] = type;
|
|
|
|
this._in_edit_mode++;
|
|
this._last_editor_scroll = this.getScrollState();
|
|
},
|
|
_removeEditor:function(editor){
|
|
if (this._last_editor == editor)
|
|
this._last_editor = 0;
|
|
|
|
if (editor.destroy)
|
|
editor.destroy();
|
|
|
|
var row = this._editors[editor.row];
|
|
delete row[editor.column];
|
|
row.$count -- ;
|
|
if (!row.$count)
|
|
delete this._editors[editor.row];
|
|
this._in_edit_mode--;
|
|
},
|
|
_changeEditorId:function(oldid, newid) {
|
|
var editor = this._editors[oldid];
|
|
if (editor){
|
|
this._editors[newid] = editor;
|
|
delete this._editors[oldid];
|
|
for (var key in editor)
|
|
editor[key].row = newid;
|
|
}
|
|
},
|
|
|
|
//get html cell by combined id
|
|
_locate_cell:function(id){
|
|
var config = this.getColumnConfig(id.column);
|
|
if (config && config.node && config.attached){
|
|
var index = this.getIndexById(id.row);
|
|
if (index >= config._yr0 && index< config._yr1)
|
|
return config.node.childNodes[index-config._yr0];
|
|
}
|
|
return 0;
|
|
},
|
|
|
|
|
|
/////////////////////////
|
|
// public methods //
|
|
/////////////////////////
|
|
editCell:function(row, column, preserve, show){
|
|
column = column || this._settings.columns[0].id;
|
|
return webix.EditAbility.edit.call(this, {row:row, column:column}, preserve, show);
|
|
},
|
|
editRow:function(id, focus){
|
|
if (id && id.row)
|
|
id = id.row;
|
|
|
|
var next = false;
|
|
this.eachColumn(function(column){
|
|
this.edit({ row:id, column:column}, next, !next);
|
|
next = true;
|
|
});
|
|
},
|
|
editColumn:function(id, focus){
|
|
if (id && id.column)
|
|
id = id.column;
|
|
|
|
var next = false;
|
|
this.eachRow(function(row){
|
|
this.edit({row:row, column:id}, next, !next);
|
|
next = true;
|
|
});
|
|
},
|
|
eachRow:function(handler, all){
|
|
var order = this.data.order;
|
|
if (all)
|
|
order = this.data._filter_order || order;
|
|
|
|
for (var i=0; i<order.length; i++)
|
|
handler.call(this, order[i]);
|
|
},
|
|
eachColumn:function(handler, all){
|
|
for (var i in this._columns_pull){
|
|
var column = this._columns_pull[i];
|
|
handler.call(this, column.id, column);
|
|
}
|
|
if (all){
|
|
for (var i in this._hidden_column_hash){
|
|
var column = this._hidden_column_hash[i];
|
|
handler.call(this, column.id, column);
|
|
}
|
|
}
|
|
},
|
|
|
|
|
|
////////////////////
|
|
// edit next //
|
|
////////////////////
|
|
_after_edit_next:function(editor_next){
|
|
if (this.getSelectedId){ //select related cell when possible
|
|
var sel = this.getSelectedId(true);
|
|
if (sel.length == 1){
|
|
this._select(editor_next);
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
_custom_tab_handler:function(tab, e){
|
|
if (this._settings.editable && !this._in_edit_mode){
|
|
//if we have focus in some custom input inside of datatable
|
|
if (e.target && e.target.tagName == "INPUT") return true;
|
|
|
|
var selection = this.getSelectedId(true);
|
|
if (selection.length == 1){
|
|
this.editNext(tab, selection[0]);
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
},
|
|
_find_cell_next:function(start, check, direction){
|
|
var row = this.getIndexById(start.row);
|
|
var column = this.getColumnIndex(start.column);
|
|
var order = this.data.order;
|
|
var cols = this._columns;
|
|
|
|
if (direction){
|
|
for (var i=row; i<order.length; i++){
|
|
for (var j=column+1; j<cols.length; j++){
|
|
var id = { row:order[i], column:cols[j].id};
|
|
if (check.call(this, id))
|
|
return id;
|
|
}
|
|
column = -1;
|
|
}
|
|
} else {
|
|
for (var i=row; i>=0; i--){
|
|
for (var j=column-1; j>=0; j--){
|
|
var id = { row:order[i], column:cols[j].id};
|
|
if (check.call(this, id))
|
|
return id;
|
|
}
|
|
column = cols.length;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
},
|
|
|
|
|
|
/////////////////////////////
|
|
// scroll correction //
|
|
/////////////////////////////
|
|
_correct_after_focus_y:function(){
|
|
if (this._in_edit_mode){
|
|
if (this._ignore_after_focus_scroll)
|
|
this._ignore_after_focus_scroll = false;
|
|
else {
|
|
this._y_scroll.scrollTo(this.getScrollState().y+this._body.childNodes[1].firstChild.scrollTop);
|
|
this._body.childNodes[1].firstChild.scrollTop = 0;
|
|
this._ignore_after_focus_scroll = true;
|
|
}
|
|
}
|
|
},
|
|
_correct_after_focus_x:function(){
|
|
if (this._in_edit_mode){
|
|
this._x_scroll.scrollTo(this._body.childNodes[1].scrollLeft);
|
|
}
|
|
},
|
|
_component_specific_edit_init:function(){
|
|
this.attachEvent("onScrollY", this._update_editor_y_pos);
|
|
this.attachEvent("onScrollX", this._update_editor_y_pos);
|
|
this.attachEvent("onScrollY", this._refocus_inline_editor);
|
|
this.attachEvent("onColumnResize", function(){ this.editStop(); });
|
|
this.attachEvent("onAfterFilter", function(){ this.editStop(); });
|
|
this.attachEvent("onRowResize", function(){ this.editStop(); });
|
|
this._body.childNodes[1].firstChild.onscroll = webix.bind(this._correct_after_focus_y, this);
|
|
this._body.childNodes[1].onscroll = webix.bind(this._correct_after_focus_x, this);
|
|
},
|
|
_update_editor_y_pos:function(){
|
|
if (this._in_edit_mode){
|
|
var old = this._last_editor_scroll;
|
|
this._last_editor_scroll = this.getScrollState();
|
|
|
|
var diff = this._last_editor_scroll.y - old.y;
|
|
this._for_each_editor(function(editor){
|
|
if (editor.getPopup){
|
|
var node = this.getItemNode(editor);
|
|
if (node)
|
|
editor.getPopup().show(node);
|
|
else
|
|
editor.getPopup().show({ x:-10000, y:-10000 });
|
|
} else if (!editor.$inline){
|
|
editor.node.top -= diff;
|
|
editor.node.style.top = editor.node.top + "px";
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
webix.extend(webix.ui.datatable, webix.EditAbility);
|
|
webix.extend(webix.ui.datatable, {
|
|
$init:function(){
|
|
this._clear_hidden_state();
|
|
this.attachEvent("onStructureLoad", this._hideInitialColumns);
|
|
},
|
|
_clear_hidden_state:function(){
|
|
this._hidden_column_hash = {};
|
|
this._hidden_column_order = webix.toArray();
|
|
this._hidden_split=[0,0];
|
|
},
|
|
_hideInitialColumns:function(){
|
|
var cols = this._columns;
|
|
this._getInitialSpans(cols);
|
|
|
|
for (var i = cols.length-1; i>=0; i--){
|
|
if (cols[i].hidden)
|
|
this.hideColumn(cols[i].id, true, true);
|
|
else if (cols[i].batch && this.config.visibleBatch && cols[i].batch!=this.config.visibleBatch){
|
|
this.hideColumn(cols[i].id, true, true);
|
|
}
|
|
}
|
|
},
|
|
_getInitialSpans:function(cols){
|
|
for(var i = 0; i<cols.length; i++)
|
|
for(var h = 0; h<cols[i].header.length;h++){
|
|
var line = cols[i].header[h];
|
|
if(line && line.colspan)
|
|
line.$colspan = line.colspan;
|
|
}
|
|
},
|
|
moveColumn:function(id, index){
|
|
var start_index = this.getColumnIndex(id);
|
|
if (start_index == index) return; //already in place
|
|
var columns = this._settings.columns;
|
|
|
|
var start = columns.splice(start_index,1);
|
|
var pos = index - (index>start_index?1:0);
|
|
webix.PowerArray.insertAt.call(columns, start[0], pos);
|
|
|
|
//TODO: split handling
|
|
//we can move split line when column dropped after it
|
|
|
|
this._refresh_columns();
|
|
},
|
|
_init_horder:function(){
|
|
var horder = this._hidden_column_order;
|
|
var cols = this._settings.columns;
|
|
if (!horder.length){
|
|
for (var i=0; i<cols.length; i++)
|
|
horder[i] = cols[i].id;
|
|
this._hidden_split = [this._settings.leftSplit, this._rightSplit];
|
|
}
|
|
},
|
|
isColumnVisible:function(id){
|
|
return !this._hidden_column_hash[id];
|
|
},
|
|
hideColumn:function(id, mode, silent){
|
|
var cols = this._settings.columns;
|
|
var horder = this._hidden_column_order;
|
|
var hhash = this._hidden_column_hash;
|
|
var column;
|
|
|
|
if (mode!==false){
|
|
|
|
var index = this.getColumnIndex(id);
|
|
webix.assert(index != -1, "hideColumn: invalid ID or already hidden");
|
|
if(index === -1 || !this.callEvent("onBeforeColumnHide", [id])) return;
|
|
|
|
//in case of second call to hide the same column, command will be ignored
|
|
if (index == -1) return;
|
|
|
|
this._init_horder();
|
|
|
|
if (index<this._settings.leftSplit)
|
|
this._settings.leftSplit--;
|
|
if (index>=this._rightSplit)
|
|
this._settings.rightSplit--;
|
|
else
|
|
this._rightSplit--;
|
|
|
|
this._hideColumn(index);
|
|
column = hhash[id] = cols.splice(index, 1)[0];
|
|
column._yr0 = -1;
|
|
delete this._columns_pull[id];
|
|
this.callEvent("onAfterColumnHide", [id]);
|
|
} else {
|
|
column = hhash[id];
|
|
webix.assert(column, "showColumn: invalid ID or already visible");
|
|
|
|
//in case of second show command for already visible column - ignoring
|
|
if(!column || !this.callEvent("onBeforeColumnShow", [id])) return;
|
|
|
|
var prev = null;
|
|
var i = 0;
|
|
for (; i<horder.length; i++){
|
|
if (horder[i] == id)
|
|
break;
|
|
if (!hhash[horder[i]])
|
|
prev = horder[i];
|
|
}
|
|
var index = prev?this.getColumnIndex(prev)+1:0;
|
|
|
|
webix.PowerArray.insertAt.call(cols,column, index);
|
|
delete column.hidden;
|
|
|
|
if (i<this._hidden_split[0])
|
|
this._settings.leftSplit++;
|
|
if (i>=this._hidden_split[1])
|
|
this._settings.rightSplit++;
|
|
else
|
|
this._rightSplit++;
|
|
|
|
delete hhash[id];
|
|
this._columns_pull[id] = column;
|
|
this.callEvent("onAfterColumnShow", [id]);
|
|
}
|
|
this._fixColspansHidden(column, mode !== false ? 0 : 1);
|
|
if (!silent)
|
|
this._refresh_columns();
|
|
},
|
|
_fixColspansHidden:function(config, mod){
|
|
for (var i = config.header.length - 1; i >= 0; i--) {
|
|
var ind = this._hidden_column_order;
|
|
var spanSource, isHidden = false, spanSize = 0;
|
|
|
|
for (var j = 0; j < ind.length; j++) {
|
|
var config = this.getColumnConfig(ind[j]);
|
|
var header = config.header[i];
|
|
if (!this.isColumnVisible(ind[j])){
|
|
//hidden column
|
|
if (header && header.$colspan && spanSize <= 0){
|
|
//start of colspan in hidden
|
|
spanSize = header.colspan = header.$colspan;
|
|
isHidden = spanSource = header;
|
|
}
|
|
if (spanSource && spanSize > 0){
|
|
//hidden column in colspan, decrease colspan size
|
|
spanSource.colspan--;
|
|
}
|
|
} else {
|
|
//visible column
|
|
if (isHidden && spanSize > 0 && spanSource && spanSource.colspan > 0){
|
|
//bit start of colspan is hidden
|
|
header = config.header[i] = spanSource;
|
|
spanSource = header;
|
|
} else if (header && header.$colspan && spanSize <= 0){
|
|
//visible start of colspan
|
|
spanSize = header.colspan = header.$colspan;
|
|
spanSource = header;
|
|
}
|
|
isHidden = null;
|
|
}
|
|
spanSize--;
|
|
}
|
|
}
|
|
},
|
|
refreshColumns:function(columns, reset){
|
|
if ((columns && columns != this.config.columns) || reset){
|
|
this._clear_hidden_state();
|
|
this._filter_elements = [];
|
|
if (columns)
|
|
this._rightSplit = columns.length - (this.config.rightSplit || 0);
|
|
}
|
|
|
|
this._columns_pull = {};
|
|
//clear rendered data
|
|
for (var i=0; i<this._columns.length; i++){
|
|
var col = this._columns[i];
|
|
this._columns_pull[col.id] = col;
|
|
col.attached = col.node = null;
|
|
}
|
|
for (var i=0; i<3; i++){
|
|
this._header.childNodes[i].innerHTML = "";
|
|
this._body.childNodes[i].firstChild.innerHTML = "";
|
|
}
|
|
|
|
//render new structure
|
|
this._columns = this.config.columns = (columns || this.config.columns);
|
|
this._rightSplit = this._columns.length-this._settings.rightSplit;
|
|
|
|
this._dtable_fully_ready = 0;
|
|
this._define_structure();
|
|
|
|
this.callEvent("onStructureUpdate");
|
|
|
|
this._update_scroll();
|
|
this.render();
|
|
},
|
|
_refresh_columns:function(){
|
|
this._dtable_fully_ready = 0;
|
|
this.callEvent("onStructureUpdate");
|
|
|
|
this._apply_headers();
|
|
this.render();
|
|
},
|
|
showColumn:function(id){
|
|
return this.hideColumn(id, false);
|
|
},
|
|
showColumnBatch:function(batch, mode){
|
|
var preserve = typeof mode != "undefined";
|
|
mode = mode !== false;
|
|
|
|
this.eachColumn(function(id, col){
|
|
if(col.batch){
|
|
var hidden = this._hidden_column_hash[col.id];
|
|
if (!mode) hidden = !hidden;
|
|
|
|
if(col.batch == batch && hidden)
|
|
this.hideColumn(col.id, !mode, true);
|
|
else if(!preserve && col.batch!=batch && !hidden)
|
|
this.hideColumn(col.id, mode, true);
|
|
}
|
|
}, true);
|
|
|
|
this._refresh_columns();
|
|
}
|
|
});
|
|
|
|
|
|
|
|
webix.extend(webix.ui.datatable, {
|
|
moveSelection:function(mode, shift){
|
|
//get existing selection as array
|
|
var t = this.getSelectedId(true);
|
|
var index = t.length-1;
|
|
|
|
if (index < 0){
|
|
if (mode == "down" || mode == "right") mode = "top";
|
|
else if (mode == "up" || mode == "left") mode = "bottom";
|
|
else return;
|
|
index = 0;
|
|
t = [{ row:1, column:1 }];
|
|
}
|
|
|
|
if (index>=0){
|
|
var row = t[index].row;
|
|
var column = t[index].column;
|
|
var preserve = this._settings.multiselect ? shift : false;
|
|
|
|
if (mode == "top" || mode == "bottom") {
|
|
if (row) {
|
|
// first/last row setting
|
|
if (mode == "top")
|
|
row = this.data.getFirstId();
|
|
else if (mode == "bottom")
|
|
row = this.data.getLastId();
|
|
}
|
|
if (column) {
|
|
// first/last column setting
|
|
var index = 0;
|
|
if (mode == "bottom")
|
|
index = this.config.columns.length-1;
|
|
column = this.columnId(index);
|
|
}
|
|
} else if (mode == "up" || mode== "down" || mode == "pgup" || mode == "pgdown"){
|
|
if (row){
|
|
//it seems row's can be seleted
|
|
var index = this.getIndexById(row);
|
|
var step = (mode == "pgup" || mode == "pgdown") ? Math.round(this._dtable_offset_height/this._settings.rowHeight) : 1;
|
|
//get new selection row
|
|
if (mode == "up" || mode == "pgup") index-=step;
|
|
else if (mode == "down" || mode == "pgdown") index+=step;
|
|
//check that we in valid row range
|
|
if (index <0) index=0;
|
|
if (index >=this.data.order.length) index=this.data.order.length-1;
|
|
|
|
row = this.getIdByIndex(index);
|
|
if (!row && this._settings.pager)
|
|
this.showItemByIndex(index);
|
|
}
|
|
} else if (mode == "right" || mode == "left"){
|
|
if (column && this.config.select != "row"){
|
|
//it seems column's can be selected
|
|
var index = this.getColumnIndex(column);
|
|
//get new selected column
|
|
if (mode == "right") index++;
|
|
else if (mode == "left") index--;
|
|
//check that result column index is in valid range
|
|
if (index<0 || index>=this.config.columns.length) return;
|
|
|
|
column = this.columnId(index);
|
|
} else if (this.open && mode == "right"){
|
|
return this.open(row);
|
|
} else if (this.close && mode == "left"){
|
|
return this.close(row);
|
|
}
|
|
} else {
|
|
webix.assert(false, "Not supported selection moving mode");
|
|
return;
|
|
}
|
|
|
|
if (row){
|
|
this.showCell(row, column);
|
|
this._select({ row:row, column:column }, preserve);
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
});
|
|
webix.extend(webix.ui.datatable, webix.KeysNavigation);
|
|
|
|
|
|
|
|
|
|
webix.extend(webix.ui.datatable,webix.DataMove);
|
|
webix.extend(webix.ui.datatable, {
|
|
$dragHTML:function(item, e){
|
|
var width = this._content_width - this._scrollSizeY;
|
|
var html="<div class='webix_dd_drag' style='width:"+(width-2)+"px;'>";
|
|
var cols = this._settings.columns;
|
|
for (var i=0; i<cols.length; i++){
|
|
var value = this._getValue(item, cols[i]);
|
|
html += "<div style='width:"+cols[i].width+"px;'>"+value+"</div>";
|
|
}
|
|
return html+"</div>";
|
|
},
|
|
getHeaderNode:function(column_id, row_index){
|
|
var ind = this.getColumnIndex(column_id);
|
|
row_index = row_index || 0;
|
|
var nodes = this._header.childNodes[1].getElementsByTagName("TR")[row_index+1].childNodes;
|
|
for (var i=0; i<nodes.length; i++)
|
|
if (nodes[i].getAttribute("column") == ind)
|
|
return nodes[i].firstChild;
|
|
return null;
|
|
},
|
|
getItemNode:function(id, e){
|
|
if (id && !id.header){
|
|
var row = id.row || id;
|
|
var rowindex = this.getIndexById(row);
|
|
var state = this._get_y_range();
|
|
//row not visible
|
|
if (rowindex < state[0] && rowindex > state[1]) return;
|
|
|
|
//get visible column
|
|
var x_range = this._get_x_range();
|
|
var colindex = this._settings.leftSplit ? 0 : x_range[0];
|
|
if (id.column){
|
|
colindex = this.getColumnIndex(id.column);
|
|
//column not visible
|
|
if (colindex < this._rightSplit && colindex >= this._settings.leftSplit && ( colindex<x_range[0] || colindex > x_range[1]))
|
|
return;
|
|
}
|
|
|
|
var column = this._settings.columns[colindex];
|
|
if (column.attached && column.node)
|
|
return column.node.childNodes[rowindex-state[0]];
|
|
}
|
|
},
|
|
dragColumn_setter:function(value){
|
|
var control; //will be defined below
|
|
if (value == "order"){
|
|
control = {
|
|
$drag:webix.bind(function(s,e){
|
|
var id = this.locate(e);
|
|
if (this._rs_process || !id || !this.callEvent("onBeforeColumnDrag", [id.column, e])) return false;
|
|
webix.DragControl._drag_context = { from:control, start:id, custom:"column_dnd" };
|
|
|
|
var column = this.getColumnConfig(id.column);
|
|
|
|
this._relative_column_drag = webix.html.posRelative(e);
|
|
this._limit_column_drag = column.width;
|
|
|
|
return "<div class='webix_dd_drag_column' style='width:"+column.width+"px'>"+(column.header[0].text||" ")+"</div>";
|
|
}, this),
|
|
$dragPos:webix.bind(function(pos, e, node){
|
|
var context = webix.DragControl.getContext();
|
|
var box = webix.html.offset(this.$view);
|
|
node.style.display = 'none';
|
|
var html = document.elementFromPoint(pos.x, box.y+1);
|
|
|
|
var id = (html?this.locate(html):null);
|
|
|
|
var start = webix.DragControl.getContext().start.column;
|
|
if (id && id.column != start && (!this._column_dnd_temp_block || id.column != this._last_sort_dnd_node )){
|
|
//ignore normal dnd , and dnd from other components
|
|
if (context.custom == "column_dnd" && webix.$$(html) == this){
|
|
if (!this.callEvent("onBeforeColumnDropOrder",[start, id.column,e])) return;
|
|
|
|
var start_index = this.getColumnIndex(start);
|
|
var end_index = this.getColumnIndex(id.column);
|
|
|
|
//on touch devices we need to preserve drag-start element till the end of dnd
|
|
if(e.touches){
|
|
this._dragTarget = e.target;
|
|
this._dragTarget.style.display = "none";
|
|
this.$view.parentNode.appendChild(this._dragTarget);
|
|
}
|
|
|
|
this.moveColumn(start, end_index+(start_index<end_index?1:0));
|
|
this._last_sort_dnd_node = id.column;
|
|
this._column_dnd_temp_block = true;
|
|
}
|
|
} if (id && id.column == start){
|
|
//flag prevent flickering just after column move
|
|
this._column_dnd_temp_block = false;
|
|
}
|
|
|
|
node.style.display = 'block';
|
|
|
|
pos.x = pos.x - this._relative_column_drag.x;
|
|
pos.y = box.y;
|
|
|
|
if (pos.x < box.x)
|
|
pos.x = box.x;
|
|
else {
|
|
var max = box.x + this.$view.offsetWidth - this._scrollSizeY-this._limit_column_drag;
|
|
if (pos.x > max)
|
|
pos.x = max;
|
|
}
|
|
webix.DragControl._skip = true;
|
|
|
|
}, this),
|
|
$dragDestroy:webix.bind(function(a, node){
|
|
webix.html.remove(node);
|
|
//clean dnd source element
|
|
if(this._dragTarget)
|
|
webix.html.remove(this._dragTarget);
|
|
var id = webix.DragControl.getContext().start;
|
|
this.callEvent("onAfterColumnDropOrder",[id.column, this._last_sort_dnd_node, a]);
|
|
}, this)
|
|
};
|
|
} else if (value) {
|
|
control = {
|
|
_inner_drag_only:true,
|
|
$drag:webix.bind(function(s,e){
|
|
var id = this.locate(e);
|
|
if (this._rs_process || !id || !this.callEvent("onBeforeColumnDrag", [id.column, e])) return false;
|
|
webix.DragControl._drag_context = { from:control, start:id, custom:"column_dnd" };
|
|
|
|
var header = this.getColumnConfig(id.column).header;
|
|
var text = " ";
|
|
for (var i = 0; i < header.length; i++)
|
|
if (header[i]){
|
|
text = header[i].text;
|
|
break;
|
|
}
|
|
|
|
return "<div class='webix_dd_drag_column'>"+text+"</div>";
|
|
}, this),
|
|
$drop:webix.bind(function(s,t,e){
|
|
var target = e;
|
|
//on touch devices event doesn't point to the actual drop target
|
|
if(e.touches && this._drag_column_last)
|
|
target = this._drag_column_last;
|
|
|
|
var id = this.locate(target);
|
|
|
|
if (!id) return false;
|
|
var start = webix.DragControl.getContext().start.column;
|
|
if (start != id.column){
|
|
if (!this.callEvent("onBeforeColumnDrop",[start, id.column ,e])) return;
|
|
var start_index = this.getColumnIndex(start);
|
|
var end_index = this.getColumnIndex(id.column);
|
|
|
|
this.moveColumn(start, end_index+(start_index<end_index?1:0));
|
|
this.callEvent("onAfterColumnDrop",[start, id.column, e]);
|
|
}
|
|
}, this),
|
|
$dragIn:webix.bind(function(s,t,e){
|
|
var context = webix.DragControl.getContext();
|
|
//ignore normal dnd , and dnd from other components
|
|
|
|
if (context.custom != "column_dnd" || context.from != control) return false;
|
|
|
|
var target = (e.target||e.srcElement);
|
|
while ((target.className||"").indexOf("webix_hcell") == -1){
|
|
target = target.parentNode;
|
|
if (!target) return;
|
|
}
|
|
|
|
if (target != this._drag_column_last){ //new target
|
|
if (this._drag_column_last)
|
|
webix.html.removeCss(this._drag_column_last, "webix_dd_over_column");
|
|
webix.html.addCss(target, "webix_dd_over_column");
|
|
}
|
|
|
|
return (this._drag_column_last = target);
|
|
}, this),
|
|
$dragDestroy:webix.bind(function(a,h){
|
|
if (this._drag_column_last)
|
|
webix.html.removeCss(this._drag_column_last, "webix_dd_over_column");
|
|
webix.html.remove(h);
|
|
}, this)
|
|
};
|
|
}
|
|
|
|
if (value){
|
|
webix.DragControl.addDrag(this._header, control);
|
|
webix.DragControl.addDrop(this._header, control, true);
|
|
}
|
|
}
|
|
});
|
|
webix.extend(webix.ui.datatable,webix.DragItem);
|
|
webix.extend(webix.ui.datatable, {
|
|
_mark_invalid:function(id, details){
|
|
this._clear_invalid_css(id);
|
|
for (var key in details)
|
|
this.addCellCss(id, key, "webix_invalid_cell");
|
|
|
|
this.addCss(id, "webix_invalid");
|
|
},
|
|
_clear_invalid:function(id){
|
|
this._clear_invalid_css(id);
|
|
this.removeCss(id, "webix_invalid");
|
|
},
|
|
_clear_invalid_css:function(id){
|
|
var item = this.getItem(id);
|
|
var mark = this.data.getMark(id, "$cellCss");
|
|
if (mark){
|
|
for (var key in mark)
|
|
mark[key] = mark[key].replace("webix_invalid_cell", "").replace(" "," ");
|
|
}
|
|
},
|
|
|
|
addRowCss:function(id, css, silent){
|
|
this.addCss(id, css, silent);
|
|
},
|
|
removeRowCss:function(id, css, silent){
|
|
this.removeCss(id, css, silent);
|
|
},
|
|
addCellCss:function(id, name, css, silent){
|
|
var mark = this.data.getMark(id, "$cellCss");
|
|
var newmark = mark || {};
|
|
|
|
var style = newmark[name]||"";
|
|
newmark[name] = style.replace(css, "").replace(" "," ")+" "+css;
|
|
|
|
if (!mark) this.data.addMark(id, "$cellCss", false, newmark, true);
|
|
if (!silent)
|
|
this.refresh(id);
|
|
},
|
|
removeCellCss:function(id, name, css, silent){
|
|
var mark = this.data.getMark(id, "$cellCss");
|
|
if (mark){
|
|
var style = mark[name]||"";
|
|
if (style)
|
|
mark[name] = style.replace(css, "").replace(" "," ");
|
|
if (!silent)
|
|
this.refresh(id);
|
|
}
|
|
}
|
|
});
|
|
webix.extend(webix.ui.datatable, webix.ValidateCollection);
|
|
|
|
(function(){
|
|
function getData(data){
|
|
var values = [];
|
|
for (var i = data.length - 1; i >= 0; i--) {
|
|
var value = data[i];
|
|
values[i] = (typeof value === "object" ? value.value : value);
|
|
}
|
|
return values;
|
|
}
|
|
|
|
var SLines = webix.Sparklines = function(){};
|
|
SLines.types ={};
|
|
|
|
SLines.getTemplate = function(customConfig){
|
|
var config = customConfig||{};
|
|
if(typeof customConfig == "string")
|
|
config = { type: customConfig };
|
|
|
|
webix.extend(config,{ type:"line" });
|
|
|
|
var slConstructor = this.types[config.type];
|
|
webix.assert(slConstructor,"Unknown sparkline type");
|
|
return webix.bind(this._template, new slConstructor(config));
|
|
};
|
|
|
|
SLines._template = function(item, common, data, column){
|
|
if (column)
|
|
return this.draw(getData(data), column.width, 33);
|
|
else
|
|
return this.draw(item.data || item, common.width, common.height);
|
|
};
|
|
})();
|
|
|
|
// add "sparklines" type
|
|
webix.attachEvent("onDataTable", function(table){
|
|
table.type.sparklines = webix.Sparklines.getTemplate();
|
|
});
|
|
|
|
(function(){
|
|
function setOpacity(color,opacity){
|
|
color = webix.color.toRgb(color);
|
|
color.push(opacity);
|
|
return "rgba("+color.join(",")+")";
|
|
}
|
|
|
|
function joinAttributes(attrs){
|
|
var result = ' ';
|
|
if(attrs)
|
|
for(var a in attrs)
|
|
result += a+'=\"'+attrs[a]+'\" ';
|
|
return result;
|
|
}
|
|
// SVG
|
|
var SVG = {};
|
|
|
|
SVG.draw = function(content, width, height, css){
|
|
var attrs = {
|
|
xmlns: 'http://www.w3.org/2000/svg',
|
|
version: '1.1',
|
|
height: '100%',
|
|
width: '100%',
|
|
viewBox: '0 0 '+width+' '+height,
|
|
"class": css||""
|
|
};
|
|
return '<svg '+joinAttributes(attrs)+'>'+content+'</svg>';
|
|
};
|
|
SVG.styleMap = {
|
|
"lineColor": "stroke",
|
|
"color": "fill"
|
|
};
|
|
SVG.group = function(path){
|
|
return "<g>"+path+"</g>";
|
|
};
|
|
SVG._handlers = {
|
|
// MoveTo: {x:px,y:py}
|
|
"M": function(p){
|
|
return " M "+ p.x+" "+ p.y;
|
|
},
|
|
// LineTo: {x:px,y:py}
|
|
"L": function(p){
|
|
return " L "+ p.x+" "+ p.y;
|
|
},
|
|
// Curve: 3 points {x:px,y:py}: two control points and an end point
|
|
"C": function(cp0, cp1, p){
|
|
return " C "+cp0.x + " "+cp0.y+" "+cp1.x + " "+cp1.y+" "+p.x + " "+p.y;
|
|
},
|
|
// Arc: center point {x:px,y:py}, radius, angle0, angle1
|
|
"A": function(p, radius, angle0, angle1){
|
|
var x = p.x+Math.cos(angle1)*radius;
|
|
var y = p.y+Math.sin(angle1)*radius;
|
|
return " A "+radius+" "+radius+" 0 0 1 "+x+" "+y;
|
|
}
|
|
};
|
|
// points is an array of an array with two elements: {string} line type, {array}
|
|
SVG.definePath = function(points, close){
|
|
var path = "";
|
|
for(var i =0; i < points.length; i++){
|
|
webix.assert(points[i][0]&&typeof points[i][0] == "string", "Path type must be a string");
|
|
var type = (points[i][0]).toUpperCase();
|
|
webix.assert(this._handlers[type], "Incorrect path type");
|
|
path += this._handlers[type].apply(this,points[i].slice(1));
|
|
|
|
}
|
|
if(close)
|
|
path += " Z";
|
|
|
|
return path;
|
|
};
|
|
SVG._linePoints = function(points){
|
|
var result = [];
|
|
for(var i = 0; i< points.length; i++){
|
|
result.push([i?"L":"M",points[i]]);
|
|
}
|
|
return result;
|
|
};
|
|
SVG.setOpacity = function(color,opacity){
|
|
color = webix.color.toRgb(color);
|
|
color.push(opacity);
|
|
return "rgba("+color.join(",")+")";
|
|
};
|
|
SVG._curvePoints = function(points){
|
|
var result = [];
|
|
for(var i = 0; i< points.length; i++){
|
|
var p = points[i];
|
|
if(!i){
|
|
result.push(["M",p[0]]);
|
|
}
|
|
result.push(["C",p[1],p[2],p[3]]);
|
|
}
|
|
return result;
|
|
};
|
|
SVG.getPath = function(path, css, attrs){
|
|
attrs = joinAttributes(attrs);
|
|
return '<path class="'+css+'" vector-effect="non-scaling-stroke" d="'+path+'" '+attrs+'/>';
|
|
};
|
|
SVG.getSector = function(p, radius, angle0, angle1, css, attrs){
|
|
attrs = joinAttributes(attrs);
|
|
var x0 = p.x+Math.cos(angle0)*radius;
|
|
var y0 = p.y+Math.sin(angle0)*radius;
|
|
var lines = [
|
|
["M",p],
|
|
["L",{x:x0, y:y0}],
|
|
["A", p,radius,angle0,angle1],
|
|
["L",p]
|
|
];
|
|
|
|
|
|
return '<path class="'+css+'" vector-effect="non-scaling-stroke" d="'+SVG.definePath(lines,true)+'" '+attrs+'/>';
|
|
};
|
|
SVG.getCurve = function(points,css, attrs){
|
|
attrs = joinAttributes(attrs);
|
|
var path = this.definePath(this._curvePoints(points));
|
|
return '<path fill="none" class="'+css+'" vector-effect="non-scaling-stroke" d="'+path+'" '+attrs+'/>';
|
|
};
|
|
SVG.getLine = function(p0,p1,css, attrs){
|
|
return this.getPath(this.definePath(this._linePoints([p0,p1]),true),css,attrs);
|
|
};
|
|
SVG.getCircle = function(p, radius, css, attrs){
|
|
attrs = joinAttributes(attrs);
|
|
return '<circle class="'+css+'" cx="'+ p.x+'" cy="'+ p.y+'" r="'+radius+'" '+attrs+'/>';
|
|
};
|
|
SVG.getRect = function(x, y, width, height, css, attrs){
|
|
attrs = joinAttributes(attrs);
|
|
return '<rect class="'+css+'" rx="0" ry="0" x="'+x+'" y="'+y+'" width="'+width+'" height="'+height+'" '+attrs+'/>';
|
|
};
|
|
webix._SVG = SVG;
|
|
})();
|
|
(function(){
|
|
var defaults = {
|
|
paddingX: 3,
|
|
paddingY: 4,
|
|
radius: 1,
|
|
minHeight: 4,
|
|
eventRadius: 8
|
|
};
|
|
|
|
function Area(config){
|
|
this.config = webix.extend(webix.copy(defaults),config||{},true);
|
|
}
|
|
|
|
Area.prototype.draw = function(data, width, height){
|
|
var eventRadius, graph, path, points, styles,
|
|
config = this.config,
|
|
Line = webix.Sparklines.types.line.prototype,
|
|
renderer = webix._SVG;
|
|
|
|
// draw area
|
|
points = this.getPoints(data, width, height);
|
|
path = renderer.definePath(Line._getLinePoints(points),true);
|
|
|
|
if(config.color)
|
|
styles = this._applyColor(renderer,config.color);
|
|
|
|
graph = renderer.group(renderer.getPath(path,'webix_sparklines_area'+(styles?' '+styles.area:'')));
|
|
// draw line
|
|
points.splice(points.length - 3, 3);
|
|
path = renderer.definePath(Line._getLinePoints(points));
|
|
graph += renderer.group(renderer.getPath(path,'webix_sparklines_line'+(styles?' '+styles.line:'')));
|
|
// draw items
|
|
graph += Line._drawItems(renderer, points, config.radius, 'webix_sparklines_item'+(styles?' '+styles.item:''));
|
|
// draw event areas
|
|
eventRadius = Math.min(data.length?(width-2*(config.paddingX||0))/data.length:0,config.eventRadius);
|
|
graph += Line._drawEventItems(renderer, points, eventRadius);
|
|
return renderer.draw(graph, width, height, 'webix_sparklines_area_chart'+(config.css?' '+config.css:''));
|
|
};
|
|
Area.prototype._applyColor = function(renderer,color){
|
|
var config = {'area': {}, 'line':{},'item':{}},
|
|
map = renderer.styleMap;
|
|
if(color){
|
|
config.area[map.color] = renderer.setOpacity(color,0.2);
|
|
config.line[map.lineColor] = color;
|
|
config.item[map.color] = color;
|
|
for(var name in config)
|
|
config[name] = webix.html.createCss(config[name]);
|
|
}
|
|
|
|
return config;
|
|
};
|
|
Area.prototype.getPoints = function(data, width, height){
|
|
var Line = webix.Sparklines.types.line.prototype;
|
|
var points =Line.getPoints.call(this, data, width, height);
|
|
var x = this.config.paddingX || 0;
|
|
var y = this.config.paddingY || 0;
|
|
points.push({x: width - x, y: height - y},{x: x, y: height - y},{x: x, y: points[0].y});
|
|
return points;
|
|
};
|
|
webix.Sparklines.types["area"]=Area;
|
|
})();
|
|
(function(){
|
|
var defaults = {
|
|
paddingX: 3,
|
|
paddingY: 4,
|
|
width: 20,
|
|
margin: 4,
|
|
minHeight: 4,
|
|
eventRadius: 8,
|
|
origin:0,
|
|
itemCss: function(value){return value < (this.config.origin||0)?" webix_sparklines_bar_negative":"";}
|
|
};
|
|
function Bar(config){
|
|
this.config = webix.extend(webix.copy(defaults),config||{},true);
|
|
}
|
|
|
|
Bar.prototype.draw = function(data, width, height){
|
|
var i, css, p, y, padding,
|
|
config = this.config,
|
|
graph = "", items = [],
|
|
points = this.getPoints(data, width, height),
|
|
renderer = webix._SVG;
|
|
|
|
// draw bars
|
|
for( i = 0; i< points.length; i++){
|
|
css = (typeof config.itemCss == 'function'?config.itemCss.call(this,data[i]):(config.itemCss||''));
|
|
if (config.negativeColor && data[i] < config.origin)
|
|
css += ' '+this._applyColor(renderer,config.negativeColor);
|
|
else if(config.color)
|
|
css += ' '+this._applyColor(renderer,config.color);
|
|
p = points[i];
|
|
items.push(renderer.getRect(p.x, p.y, p.width, p.height,'webix_sparklines_bar '+css));
|
|
}
|
|
graph += renderer.group(items.join(""));
|
|
// origin)
|
|
y = parseInt(this._getOrigin(data, width, height),10)+0.5;
|
|
padding = config.paddingX||0;
|
|
graph += renderer.group(renderer.getLine({x:padding, y: y},{x: width-padding, y: y},'webix_sparklines_origin'));
|
|
|
|
// event areas
|
|
var evPoints = this._getEventPoints(data, width, height);
|
|
var evItems = [];
|
|
for( i = 0; i< evPoints.length; i++){
|
|
p = evPoints[i];
|
|
evItems.push(renderer.getRect(p.x, p.y, p.width, p.height,'webix_sparklines_event_area ',{"webix_area":i}));
|
|
}
|
|
graph += renderer.group(evItems.join(""));
|
|
return renderer.draw(graph, width, height, 'webix_sparklines_bar_chart'+(config.css?' '+config.css:''));
|
|
};
|
|
Bar.prototype._applyColor = function(renderer,color){
|
|
var config = {},
|
|
map = renderer.styleMap;
|
|
if(color)
|
|
config[map.color] = color;
|
|
return webix.html.createCss(config);
|
|
};
|
|
Bar.prototype._getOrigin = function(data, width, height){
|
|
var config = this.config;
|
|
var y = config.paddingY||0;
|
|
height = (height||100)-y*2;
|
|
var pos = y+height;
|
|
if(config.origin !== false){
|
|
var minValue = Math.min.apply(null,data);
|
|
var maxValue = Math.max.apply(null,data);
|
|
var origin = config.origin||0;
|
|
if(origin >= maxValue){
|
|
pos = y;
|
|
}
|
|
else if(origin > minValue){
|
|
var unitY = height/(maxValue - minValue);
|
|
pos -= unitY*(origin-minValue);
|
|
}
|
|
}
|
|
return pos;
|
|
};
|
|
Bar.prototype._getEventPoints = function(data, width, height){
|
|
var result = [];
|
|
var x = this.config.paddingX||0;
|
|
var y = this.config.paddingY||0;
|
|
width = (width||100)-x*2;
|
|
height = (height||100)-y*2;
|
|
if(data.length){
|
|
var unitX = width/data.length;
|
|
for(var i=0; i < data.length; i++)
|
|
result.push({x: Math.ceil(unitX*i)+x, y: y, height: height, width: unitX});
|
|
}
|
|
return result;
|
|
};
|
|
Bar.prototype.getPoints = function(data, width, height){
|
|
var config = this.config;
|
|
var minValue = Math.min.apply(null,data);
|
|
var maxValue = Math.max.apply(null,data);
|
|
var result = [];
|
|
var x = config.paddingX;
|
|
var y = config.paddingY;
|
|
var margin = config.margin;
|
|
var barWidth = config.width||20;
|
|
var originY = this._getOrigin(data,width,height);
|
|
width = (width||100)-x*2;
|
|
height = (height||100)-y*2;
|
|
if(data.length){
|
|
var unitX = width/data.length;
|
|
var yNum = maxValue - minValue;
|
|
barWidth = Math.min(unitX-margin,barWidth);
|
|
margin = unitX-barWidth;
|
|
var minHeight = 0;
|
|
var origin = minValue;
|
|
|
|
if(config.origin !== false && config.origin > minValue)
|
|
origin = config.origin||0;
|
|
else
|
|
minHeight = config.minHeight;
|
|
|
|
var unitY = (height-minHeight)/(yNum?yNum:1);
|
|
|
|
for(var i=0; i < data.length; i++){
|
|
var h = Math.ceil(unitY*(data[i]-origin));
|
|
result.push({x: Math.ceil(unitX*i)+x+margin/2, y: originY-(data[i]>=origin?h:0)-minHeight, height: Math.abs(h)+minHeight, width: barWidth});
|
|
}
|
|
|
|
}
|
|
return result;
|
|
};
|
|
webix.Sparklines.types["bar"]=Bar;
|
|
})();
|
|
(function(){
|
|
var defaults = {
|
|
paddingX: 6,
|
|
paddingY: 6,
|
|
radius: 2,
|
|
minHeight: 4,
|
|
eventRadius: 8
|
|
};
|
|
function Line(config){
|
|
this.config = webix.extend(webix.copy(defaults),config||{},true);
|
|
}
|
|
|
|
Line.prototype.draw = function(data, width, height){
|
|
var points = this.getPoints(data, width, height);
|
|
var config = this.config;
|
|
var renderer = webix._SVG;
|
|
var styles = config.color?this._applyColor(renderer,config.color):null;
|
|
// draw line
|
|
var path = renderer.definePath(this._getLinePoints(points));
|
|
var graph = renderer.group(renderer.getPath(path,'webix_sparklines_line'+(styles?' '+styles.line:'')));
|
|
// draw items
|
|
graph += this._drawItems(renderer, points, config.radius, 'webix_sparklines_item'+(styles?' '+styles.item:''));
|
|
// draw event items
|
|
var eventRadius = Math.min(data.length?(width-2*(config.paddingX||0))/data.length:0,config.eventRadius);
|
|
graph += this._drawEventItems(renderer, points, eventRadius);
|
|
return renderer.draw(graph, width, height, "webix_sparklines_line_chart"+(config.css?' '+config.css:''));
|
|
};
|
|
Line.prototype._applyColor = function(renderer,color){
|
|
var config = {'line':{},'item':{}},
|
|
map = renderer.styleMap;
|
|
if(color){
|
|
config.line[map.lineColor] = color;
|
|
config.item[map.color] = color;
|
|
for(var name in config)
|
|
config[name] = webix.html.createCss(config[name]);
|
|
}
|
|
return config;
|
|
};
|
|
Line.prototype._drawItems = function(renderer,points,radius,css,attrs){
|
|
var items = [];
|
|
for(var i = 0; i< points.length; i++){
|
|
items.push(renderer.getCircle(points[i], radius, css,attrs));
|
|
}
|
|
return renderer.group(items.join(""));
|
|
};
|
|
Line.prototype._drawEventItems = function(renderer,points,radius){
|
|
var items = [];
|
|
for(var i = 0; i< points.length; i++){
|
|
items.push(renderer.getCircle(points[i], radius, 'webix_sparklines_event_area', {webix_area:i}));
|
|
}
|
|
return renderer.group(items.join(""));
|
|
};
|
|
|
|
Line.prototype._getLinePoints = function(points){
|
|
var i, type, result =[];
|
|
for( i =0; i< points.length; i++){
|
|
type = i?"L":"M";
|
|
result.push([type,points[i]]);
|
|
}
|
|
return result;
|
|
};
|
|
Line.prototype.getPoints = function(data, width, height) {
|
|
var config = this.config;
|
|
var minValue = Math.min.apply(null,data);
|
|
var maxValue = Math.max.apply(null,data);
|
|
var result = [];
|
|
var x = config.paddingX||0;
|
|
var y = config.paddingY||0;
|
|
width = (width||100)-x*2;
|
|
var minHeight = config.minHeight||0;
|
|
height = (height||100)-y*2;
|
|
if(data.length){
|
|
if(data.length==1)
|
|
result.push({x: width/2+x, y: height/2+x});
|
|
else{
|
|
var unitX = width/(data.length-1);
|
|
var yNum = maxValue - minValue;
|
|
var unitY = (height- minHeight)/(yNum?yNum:1);
|
|
if(!yNum)
|
|
height /= 2;
|
|
for(var i=0; i < data.length; i++){
|
|
result.push({x: Math.ceil(unitX*i)+x, y: height-Math.ceil(unitY*(data[i]-minValue))+y-minHeight});
|
|
}
|
|
}
|
|
}
|
|
return result;
|
|
};
|
|
webix.Sparklines.types["line"] = Line;
|
|
})();
|
|
(function(){
|
|
var defaults = {
|
|
paddingY: 2
|
|
};
|
|
|
|
function Pie(config){
|
|
this.config = webix.extend(defaults,config||{},true);
|
|
}
|
|
Pie.prototype._defColorsCursor = 0;
|
|
Pie.prototype._defColors = [
|
|
"#f55b50","#ff6d3f","#ffa521","#ffc927","#ffee54","#d3e153","#9acb61","#63b967",
|
|
"#21a497","#21c5da","#3ea4f5","#5868bf","#7b53c0","#a943ba","#ec3b77","#9eb0b8"
|
|
];
|
|
Pie.prototype._getColor = function(i,data){
|
|
var count = data.length;
|
|
var colorsCount = this._defColors.length;
|
|
if(colorsCount > count){
|
|
if(i){
|
|
if(i < colorsCount - count)
|
|
i = this._defColorsCursor +2;
|
|
else
|
|
i = this._defColorsCursor+1;
|
|
}
|
|
this._defColorsCursor = i;
|
|
}
|
|
else
|
|
i = i%colorsCount;
|
|
return this._defColors[i];
|
|
};
|
|
Pie.prototype.draw = function(data, width, height){
|
|
var attrs, graph, i, sectors,
|
|
config = this.config,
|
|
color = config.color||this._getColor,
|
|
points = this.getAngles(data),
|
|
renderer = webix._SVG,
|
|
y = config.paddingY|| 0,
|
|
// radius
|
|
r = height/2 - y,
|
|
// center
|
|
x0 = width/2, y0 = height/2;
|
|
|
|
// draw sectors
|
|
if(typeof color != "function")
|
|
color = function(){return color;};
|
|
sectors = "";
|
|
for( i =0; i < points.length; i++){
|
|
attrs = {};
|
|
attrs[renderer.styleMap['color']] = color.call(this,i,data,this._context);
|
|
sectors += renderer.getSector({x:x0,y:y0},r,points[i][0],points[i][1],'webix_sparklines_sector', attrs);
|
|
}
|
|
graph = renderer.group(sectors);
|
|
|
|
// draw event areas
|
|
sectors = "";
|
|
for(i =0; i < points.length; i++){
|
|
sectors += renderer.getSector({x:x0,y:y0},r,points[i][0],points[i][1],'webix_sparklines_event_area',{"webix_area":i});
|
|
}
|
|
graph += renderer.group(sectors);
|
|
|
|
return renderer.draw(graph, width, height, 'webix_sparklines_pie_chart'+(config.css?' '+config.css:''));
|
|
};
|
|
Pie.prototype.getAngles = function(data){
|
|
var a0 = -Math.PI/ 2, a1,
|
|
i, result = [];
|
|
|
|
var ratios = this._getRatios(data);
|
|
|
|
for( i =0; i < data.length; i++){
|
|
a1= -Math.PI/2+ratios[i]-0.0001;
|
|
result.push([a0,a1]);
|
|
a0 = a1;
|
|
}
|
|
return result;
|
|
};
|
|
Pie.prototype._getTotalValue = function(data){
|
|
var t=0;
|
|
for(var i = 0; i < data.length;i++)
|
|
t += data[i];
|
|
return t;
|
|
};
|
|
Pie.prototype._getRatios = function(data){
|
|
var i, value,
|
|
ratios = [],
|
|
prevSum = 0,
|
|
totalValue = this._getTotalValue(data);
|
|
for(i = 0; i < data.length;i++){
|
|
value = data[i];
|
|
ratios[i] = Math.PI*2*(totalValue?((value+prevSum)/totalValue):(1/data.length));
|
|
prevSum += value;
|
|
}
|
|
|
|
return ratios;
|
|
};
|
|
|
|
webix.Sparklines.types["pie"]=Pie;
|
|
})();
|
|
(function(){
|
|
var defaults = {
|
|
paddingX: 3,
|
|
paddingY: 6,
|
|
radius: 2,
|
|
minHeight: 4,
|
|
eventRadius: 8
|
|
};
|
|
|
|
function Spline(config){
|
|
this.config = webix.extend(webix.copy(defaults),config||{},true);
|
|
}
|
|
|
|
Spline.prototype.draw = function(data, width, height){
|
|
var config = this.config,
|
|
graph = "",
|
|
Line = webix.Sparklines.types.line.prototype,
|
|
points = this.getPoints(data, width, height),
|
|
renderer = webix._SVG,
|
|
styles = config.color?this._applyColor(renderer,config.color):null;
|
|
|
|
// draw spline
|
|
graph += renderer.group(renderer.getCurve(points, 'webix_sparklines_line'+(styles?' '+styles.line:'')));
|
|
|
|
var linePoints = Line.getPoints.call(this,data, width, height);
|
|
// draw items
|
|
graph += Line._drawItems(renderer, linePoints, config.radius, 'webix_sparklines_item'+(styles?' '+styles.item:''));
|
|
// draw event items
|
|
var eventRadius = Math.min(data.length?(width-2*(config.paddingX||0))/data.length:0,config.eventRadius);
|
|
graph += Line._drawEventItems(renderer, linePoints, eventRadius);
|
|
return renderer.draw(graph, width, height,"webix_sparklines_line_chart"+(config.css?' '+config.css:''));
|
|
};
|
|
Spline.prototype._applyColor = function(renderer,color){
|
|
var config = {'line':{},'item':{}},
|
|
map = renderer.styleMap;
|
|
if(color){
|
|
config.line[map.lineColor] = color;
|
|
config.item[map.color] = color;
|
|
for(var name in config)
|
|
config[name] = webix.html.createCss(config[name]);
|
|
}
|
|
return config;
|
|
};
|
|
Spline.prototype.getPoints = function(data, width, height){
|
|
var i, points, px, py,
|
|
result = [], x = [], y =[],
|
|
Line = webix.Sparklines.types.line.prototype;
|
|
|
|
points = Line.getPoints.call(this, data, width, height);
|
|
|
|
for(i = 0; i< points.length; i++){
|
|
x.push(points[i].x);
|
|
y.push(points[i].y);
|
|
}
|
|
px = this._getControlPoints(x);
|
|
py = this._getControlPoints(y);
|
|
/*updates path settings, the browser will draw the new spline*/
|
|
for ( i=0;i<points.length-1;i++){
|
|
result.push([points[i],{x:px[0][i],y:py[0][i]},{x:px[1][i],y:py[1][i]},points[i+1]]);
|
|
}
|
|
return result;
|
|
|
|
};
|
|
/* code from https://www.particleincell.com/2012/bezier-splines/ */
|
|
Spline.prototype._getControlPoints = function(points){
|
|
var a=[], b=[], c=[], r=[], p1=[], p2=[],
|
|
i, m, n = points.length-1;
|
|
|
|
a[0]=0;
|
|
b[0]=2;
|
|
c[0]=1;
|
|
r[0] = points[0] + 2*points[1];
|
|
|
|
for (i = 1; i < n - 1; i++){
|
|
a[i]=1;
|
|
b[i]=4;
|
|
c[i]=1;
|
|
r[i] = 4 * points[i] + 2 * points[i+1];
|
|
}
|
|
|
|
a[n-1]=2;
|
|
b[n-1]=7;
|
|
c[n-1]=0;
|
|
r[n-1] = 8*points[n-1]+points[n];
|
|
|
|
for (i = 1; i < n; i++){
|
|
m = a[i]/b[i-1];
|
|
b[i] = b[i] - m * c[i - 1];
|
|
r[i] = r[i] - m*r[i-1];
|
|
}
|
|
|
|
p1[n-1] = r[n-1]/b[n-1];
|
|
for (i = n - 2; i >= 0; --i)
|
|
p1[i] = (r[i] - c[i] * p1[i+1]) / b[i];
|
|
|
|
for (i=0;i<n-1;i++)
|
|
p2[i]=2*points[i+1]-p1[i+1];
|
|
|
|
p2[n-1]=0.5*(points[n]+p1[n-1]);
|
|
|
|
return [p1, p2];
|
|
};
|
|
|
|
webix.Sparklines.types["spline"] = Spline;
|
|
|
|
var defaultsArea = {
|
|
paddingX: 3,
|
|
paddingY: 6,
|
|
radius: 1,
|
|
minHeight: 4,
|
|
eventRadius: 8
|
|
};
|
|
// spline area
|
|
function SplineArea(config){
|
|
this.config = webix.extend(webix.copy(defaultsArea),config||{},true);
|
|
}
|
|
SplineArea.prototype = webix.copy(Spline.prototype);
|
|
SplineArea.prototype.draw = function(data, width, height){
|
|
var config = this.config,
|
|
Line = webix.Sparklines.types.line.prototype,
|
|
renderer = webix._SVG,
|
|
styles = config.color?this._applyColor(renderer,config.color):null;
|
|
|
|
var points = this.getPoints(data, width, height);
|
|
// draw area
|
|
var linePoints = points.splice(points.length - 3, 3);
|
|
var linePath = renderer._linePoints(linePoints);
|
|
linePath[0][0] = "L";
|
|
var areaPoints = renderer._curvePoints(points).concat(linePath);
|
|
var graph = renderer.group(renderer.getPath(renderer.definePath(areaPoints),'webix_sparklines_area'+(styles?' '+styles.area:''), true));
|
|
// draw line
|
|
graph += renderer.group(renderer.getPath(renderer.definePath(renderer._curvePoints(points)),'webix_sparklines_line'+(styles?' '+styles.line:'')));
|
|
|
|
var itemPoints = Line.getPoints.call(this,data, width, height);
|
|
// draw items
|
|
graph += Line._drawItems(renderer, itemPoints, config.radius, 'webix_sparklines_item'+(styles?' '+styles.item:''));
|
|
// draw event items
|
|
var eventRadius = Math.min(data.length?(width-2*(config.paddingX||0))/data.length:0,config.eventRadius);
|
|
graph += Line._drawEventItems(renderer, itemPoints, eventRadius);
|
|
return renderer.draw(graph, width, height, "webix_sparklines_splinearea_chart"+(config.css?' '+config.css:''));
|
|
};
|
|
SplineArea.prototype._applyColor = function(renderer,color){
|
|
var config = {'area': {}, 'line':{},'item':{}},
|
|
map = renderer.styleMap;
|
|
if(color){
|
|
config.area[map.color] = renderer.setOpacity(color,0.2);
|
|
config.line[map.lineColor] = color;
|
|
config.item[map.color] = color;
|
|
for(var name in config)
|
|
config[name] = webix.html.createCss(config[name]);
|
|
}
|
|
return config;
|
|
};
|
|
SplineArea.prototype.getPoints = function(data, width, height){
|
|
var points = Spline.prototype.getPoints.call(this, data, width, height);
|
|
var x = this.config.paddingX || 0;
|
|
var y = this.config.paddingY || 0;
|
|
points.push({x: width - x, y: height - y},{x: x, y: height - y},{x: x, y: points[0][0].y});
|
|
return points;
|
|
};
|
|
webix.Sparklines.types["splineArea"] = SplineArea;
|
|
})();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
webix.TreeTableClick = {};
|
|
|
|
webix.TreeTablePaste = {
|
|
insert: function(data) {
|
|
var parent = this.getSelectedId(true, true);
|
|
for (var i = 0; i < data.length; i++) {
|
|
var item = {};
|
|
for (var j = 0; j < this._settings.columns.length; j++) {
|
|
item[this._settings.columns[j].id] = data[i][j] || "";
|
|
}
|
|
if (!webix.isUndefined(item.id) && this.exists(item.id))
|
|
item.id = webix.uid();
|
|
this.add(item, null, parent[0]);
|
|
}
|
|
}
|
|
};
|
|
|
|
webix.protoUI({
|
|
name:"treetable",
|
|
$init:function(){
|
|
webix.extend(this.data, webix.TreeStore, true);
|
|
webix.extend(this.type, webix.TreeType);
|
|
webix.extend(this, webix.TreeDataMove, true);
|
|
|
|
for (var key in webix.TreeClick)
|
|
if (!this.on_click[key])
|
|
this.on_click[key] = this._unwrap_id(webix.TreeClick[key]);
|
|
|
|
this.type.treetable = webix.template("{common.space()}{common.icon()} {common.folder()}");
|
|
this.type.treecheckbox = function(obj, common){
|
|
if (obj.indeterminate && !obj.nocheckbox)
|
|
return "<div class='webix_tree_checkbox webix_indeterminate'></div>";
|
|
else
|
|
return webix.TreeType.checkbox.apply(this, arguments);
|
|
};
|
|
|
|
this.data.provideApi(this,true);
|
|
|
|
},
|
|
$exportView:function(options){
|
|
webix.extend(options, { filterHTML: true });
|
|
return this;
|
|
},
|
|
_drag_order_complex:false,
|
|
_unwrap_id:function(original){
|
|
return function (e,id){
|
|
id = id.row;
|
|
return original.call(this,e,id);
|
|
};
|
|
},
|
|
getState:function(){
|
|
var state = webix.DataState.getState.call(this);
|
|
webix.extend(state, webix.TreeAPI.getState.call(this));
|
|
return state;
|
|
},
|
|
setState:function(state){
|
|
if (webix.TreeAPI.setState.call(this, state)){
|
|
//run grid-state only when tree component was fully loaded
|
|
webix.DataState.setState.call(this, state);
|
|
}
|
|
},
|
|
clipboard_setter: function(value) {
|
|
webix.extend(this._paste, webix.TreeTablePaste);
|
|
return webix.TablePaste.clipboard_setter.call(this, value);
|
|
},
|
|
_run_load_next:function(conf, direction){
|
|
for (var i=0; i<conf.start; i++){
|
|
var id = this.data.order[i];
|
|
if (id && this.getItem(id).$level != 1)
|
|
conf.start--;
|
|
}
|
|
return webix.ui.datatable.prototype._run_load_next.call(this, conf, direction);
|
|
},
|
|
}, webix.TreeAPI, webix.TreeStateCheckbox, webix.TreeDataLoader, webix.ui.datatable);
|
|
|
|
|
|
|
|
|
|
|
|
webix.Canvas = webix.proto({
|
|
$init:function(container){
|
|
this._canvas_labels = [];
|
|
this._canvas_name = container.name;
|
|
this._obj = webix.toNode(container.container||container);
|
|
var width = container.width*(window.devicePixelRatio||1);
|
|
var height = container.height*(window.devicePixelRatio||1);
|
|
var style = container.style||"";
|
|
style += ";width:"+container.width+"px;height:"+container.height+"px;";
|
|
this._prepareCanvas(container.name, style ,width, height);
|
|
},
|
|
_prepareCanvas:function(name,style,x,y){
|
|
//canvas has the same size as master object
|
|
this._canvas = webix.html.create("canvas",{ width:x, height:y, canvas_id:name, style:(style||"")});
|
|
this._obj.appendChild(this._canvas);
|
|
//use excanvas in IE
|
|
if (!this._canvas.getContext){
|
|
if (webix.env.isIE){
|
|
webix.require("legacy/excanvas/excanvas.js", true); //sync loading
|
|
G_vmlCanvasManager.init_(document);
|
|
G_vmlCanvasManager.initElement(this._canvas);
|
|
} else //some other not supported browser
|
|
webix.assert(this._canvas.getContext,"Canvas is not supported in the browser");
|
|
}
|
|
return this._canvas;
|
|
},
|
|
getCanvas:function(context){
|
|
var ctx = (this._canvas||this._prepareCanvas(this._contentobj)).getContext(context||"2d");
|
|
if(!this._webixDevicePixelRatio){
|
|
this._webixDevicePixelRatio = true;
|
|
ctx.scale(window.devicePixelRatio||1, window.devicePixelRatio||1);
|
|
}
|
|
return ctx;
|
|
},
|
|
_resizeCanvas:function(x, y){
|
|
if (this._canvas){
|
|
this._canvas.setAttribute("width", x*(window.devicePixelRatio||1));
|
|
this._canvas.setAttribute("height", y*(window.devicePixelRatio||1));
|
|
this._canvas.style.width = x+"px";
|
|
this._canvas.style.height = y+"px";
|
|
this._webixDevicePixelRatio = false;
|
|
}
|
|
},
|
|
renderText:function(x,y,text,css,w){
|
|
if (!text) return; //ignore empty text
|
|
if (w) w = Math.max(w,0);
|
|
if (y) y = Math.max(y,0);
|
|
var t = webix.html.create("DIV",{
|
|
"class":"webix_canvas_text"+(css?(" "+css):""),
|
|
"style":"left:"+x+"px; top:"+y+"px;"
|
|
},text);
|
|
this._obj.appendChild(t);
|
|
this._canvas_labels.push(t); //destructor?
|
|
if (w)
|
|
t.style.width = w+"px";
|
|
return t;
|
|
},
|
|
renderTextAt:function(valign,align, x,y,t,c,w){
|
|
var text=this.renderText.call(this,x,y,t,c,w);
|
|
if (text){
|
|
if (valign){
|
|
if(valign == "middle")
|
|
text.style.top = parseInt(y-text.offsetHeight/2,10) + "px";
|
|
else
|
|
text.style.top = y-text.offsetHeight + "px";
|
|
}
|
|
if (align){
|
|
if(align == "left")
|
|
text.style.left = x-text.offsetWidth + "px";
|
|
else
|
|
text.style.left = parseInt(x-text.offsetWidth/2,10) + "px";
|
|
}
|
|
}
|
|
return text;
|
|
},
|
|
clearCanvas:function(skipMap){
|
|
var areas=[], i;
|
|
|
|
for(i=0; i < this._canvas_labels.length;i++)
|
|
this._obj.removeChild(this._canvas_labels[i]);
|
|
this._canvas_labels = [];
|
|
|
|
if (!skipMap&&this._obj._htmlmap){
|
|
|
|
//areas that correspond this canvas layer
|
|
areas = this._getMapAreas();
|
|
|
|
//removes areas of this canvas
|
|
while(areas.length){
|
|
areas[0].parentNode.removeChild(areas[0]);
|
|
areas.splice(0,1);
|
|
}
|
|
areas = null;
|
|
|
|
//removes _htmlmap object if all its child nodes are removed
|
|
if(!this._obj._htmlmap.getElementsByTagName("AREA").length){
|
|
this._obj._htmlmap.parentNode.removeChild(this._obj._htmlmap);
|
|
this._obj._htmlmap = null;
|
|
}
|
|
|
|
}
|
|
//FF breaks, when we are using clear canvas and call clearRect without parameters
|
|
this.getCanvas().clearRect(0,0,this._canvas.offsetWidth, this._canvas.offsetHeight);
|
|
},
|
|
toggleCanvas:function(){
|
|
this._toggleCanvas(this._canvas.style.display=="none");
|
|
},
|
|
showCanvas:function(){
|
|
this._toggleCanvas(true);
|
|
},
|
|
hideCanvas:function(){
|
|
this._toggleCanvas(false);
|
|
},
|
|
_toggleCanvas:function(show){
|
|
var areas, i;
|
|
|
|
for(i=0; i < this._canvas_labels.length;i++)
|
|
this._canvas_labels[i].style.display = (show?"":"none");
|
|
|
|
if (this._obj._htmlmap){
|
|
areas = this._getMapAreas();
|
|
for( i = 0; i < areas.length; i++){
|
|
if(show)
|
|
areas[i].removeAttribute("disabled");
|
|
else
|
|
areas[i].setAttribute("disabled","true");
|
|
}
|
|
}
|
|
//FF breaks, when we are using clear canvas and call clearRect without parameters
|
|
this._canvas.style.display = (show?"":"none");
|
|
},
|
|
_getMapAreas:function(){
|
|
var res = [], areas, i;
|
|
|
|
areas = this._obj._htmlmap.getElementsByTagName("AREA");
|
|
|
|
for(i = 0; i < areas.length; i++){
|
|
if(areas[i].getAttribute("userdata") == this._canvas_name){
|
|
res.push(areas[i]);
|
|
}
|
|
}
|
|
|
|
return res;
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
webix.color = {
|
|
_toHex:["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"],
|
|
toHex:function(number, length){
|
|
number=parseInt(number,10);
|
|
var str = "";
|
|
while (number>0){
|
|
str=this._toHex[number%16]+str;
|
|
number=Math.floor(number/16);
|
|
}
|
|
while (str.length <length)
|
|
str = "0"+str;
|
|
return str;
|
|
},
|
|
hexToDec:function(hex){
|
|
return parseInt(hex, 16);
|
|
},
|
|
toRgb:function(rgb){
|
|
var r,g,b,rgbArr;
|
|
if (typeof(rgb) != 'string') {
|
|
r = rgb[0];
|
|
g = rgb[1];
|
|
b = rgb[2];
|
|
} else if (rgb.indexOf('rgb')!=-1) {
|
|
rgbArr = rgb.substr(rgb.indexOf("(")+1,rgb.lastIndexOf(")")-rgb.indexOf("(")-1).split(",");
|
|
r = rgbArr[0];
|
|
g = rgbArr[1];
|
|
b = rgbArr[2];
|
|
} else {
|
|
if (rgb.substr(0, 1) == '#') {
|
|
rgb = rgb.substr(1);
|
|
}
|
|
r = this.hexToDec(rgb.substr(0, 2));
|
|
g = this.hexToDec(rgb.substr(2, 2));
|
|
b = this.hexToDec(rgb.substr(4, 2));
|
|
}
|
|
r = (parseInt(r,10)||0);
|
|
g = (parseInt(g,10)||0);
|
|
b = (parseInt(b,10)||0);
|
|
if (r < 0 || r > 255)
|
|
r = 0;
|
|
if (g < 0 || g > 255)
|
|
g = 0;
|
|
if (b < 0 || b > 255)
|
|
b = 0;
|
|
return [r,g,b];
|
|
},
|
|
hsvToRgb:function(h, s, v){
|
|
var hi,f,p,q,t,r,g,b;
|
|
hi = Math.floor((h/60))%6;
|
|
f = h/60-hi;
|
|
p = v*(1-s);
|
|
q = v*(1-f*s);
|
|
t = v*(1-(1-f)*s);
|
|
r = 0;
|
|
g = 0;
|
|
b = 0;
|
|
switch(hi) {
|
|
case 0:
|
|
r = v; g = t; b = p;
|
|
break;
|
|
case 1:
|
|
r = q; g = v; b = p;
|
|
break;
|
|
case 2:
|
|
r = p; g = v; b = t;
|
|
break;
|
|
case 3:
|
|
r = p; g = q; b = v;
|
|
break;
|
|
case 4:
|
|
r = t; g = p; b = v;
|
|
break;
|
|
case 5:
|
|
r = v; g = p; b = q;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
r = Math.floor(r*255);
|
|
g = Math.floor(g*255);
|
|
b = Math.floor(b*255);
|
|
return [r, g, b];
|
|
},
|
|
rgbToHsv:function(r, g, b){
|
|
var r0,g0,b0,min0,max0,s,h,v;
|
|
r0 = r/255;
|
|
g0 = g/255;
|
|
b0 = b/255;
|
|
min0 = Math.min(r0, g0, b0);
|
|
max0 = Math.max(r0, g0, b0);
|
|
h = 0;
|
|
s = max0===0?0:(1-min0/max0);
|
|
v = max0;
|
|
if (max0 == min0) {
|
|
h = 0;
|
|
} else if (max0 == r0 && g0>=b0) {
|
|
h = 60*(g0 - b0)/(max0 - min0)+0;
|
|
} else if (max0 == r0 && g0 < b0) {
|
|
h = 60*(g0 - b0)/(max0 - min0)+360;
|
|
} else if (max0 == g0) {
|
|
h = 60*(b0 - r0)/(max0-min0)+120;
|
|
} else if (max0 == b0) {
|
|
h = 60*(r0 - g0)/(max0 - min0)+240;
|
|
}
|
|
return [h, s, v];
|
|
}
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
webix.HtmlMap = webix.proto({
|
|
$init:function(key){
|
|
this._id = "map_"+webix.uid();
|
|
this._key = key;
|
|
this._map = [];
|
|
this._areas = [];
|
|
},
|
|
addRect: function(id,points,userdata) {
|
|
this._createMapArea(id,"RECT",points,userdata);
|
|
},
|
|
addPoly: function(id,points,userdata) {
|
|
this._createMapArea(id,"POLY",points,userdata);
|
|
},
|
|
_createMapArea:function(id,shape,coords,userdata){
|
|
var extra_data = "";
|
|
if(arguments.length==4)
|
|
extra_data = "userdata='"+userdata+"'";
|
|
this._map.push("<area "+this._key+"='"+id+"' shape='"+shape+"' coords='"+coords.join()+"' "+extra_data+"></area>");
|
|
this._areas.push({index: userdata, points:coords});
|
|
|
|
},
|
|
addSector:function(id,alpha0,alpha1,x,y,R,ky,userdata){
|
|
var points = [];
|
|
points.push(x);
|
|
points.push(Math.floor(y*ky));
|
|
for(var i = alpha0; i < alpha1; i+=Math.PI/18){
|
|
points.push(Math.floor(x+R*Math.cos(i)));
|
|
points.push(Math.floor((y+R*Math.sin(i))*ky));
|
|
}
|
|
points.push(Math.floor(x+R*Math.cos(alpha1)));
|
|
points.push(Math.floor((y+R*Math.sin(alpha1))*ky));
|
|
points.push(x);
|
|
points.push(Math.floor(y*ky));
|
|
|
|
return this.addPoly(id,points,userdata);
|
|
},
|
|
render:function(obj){
|
|
var d = webix.html.create("DIV");
|
|
d.style.cssText="position:absolute; width:100%; height:100%; top:0px; left:0px;";
|
|
obj.appendChild(d);
|
|
var src = webix.env.isIE?"":"src='data:image/gif;base64,R0lGODlhEgASAIAAAP///////yH5BAUUAAEALAAAAAASABIAAAIPjI+py+0Po5y02ouz3pwXADs='";
|
|
d.innerHTML="<map id='"+this._id+"' name='"+this._id+"'>"+this._map.join("\n")+"</map><img "+src+" class='webix_map_img' usemap='#"+this._id+"'>";
|
|
|
|
obj._htmlmap = d; //for clearing routine
|
|
|
|
this._map = [];
|
|
}
|
|
});
|
|
|
|
|
|
|
|
webix.protoUI({
|
|
name:"chart",
|
|
$init:function(config){
|
|
this._series = [this._settings];
|
|
this._legend_labels = [];
|
|
this._contentobj.className += " webix_chart";
|
|
this.$ready.push(this._after_init_call);
|
|
/*preset*/
|
|
if(config.preset){
|
|
this._definePreset(config);
|
|
}
|
|
|
|
// move series to end of configuration properties hash
|
|
// so it will be parsed after other settings
|
|
if(config.series){
|
|
var series = config.series;
|
|
delete config.series;
|
|
config.series = series;
|
|
}
|
|
|
|
this.attachEvent("onMouseMove",this._switchSeries);
|
|
|
|
this.data.provideApi(this, true);
|
|
},
|
|
_after_init_call:function(){
|
|
this.data.attachEvent("onStoreUpdated",webix.bind(function(){
|
|
this.render();
|
|
},this));
|
|
},
|
|
defaults:{
|
|
color:"default",
|
|
alpha:"1",
|
|
label:false,
|
|
value:"{obj.value}",
|
|
padding:{},
|
|
type:"pie",
|
|
lineColor:"#ffffff",
|
|
cant:0.5,
|
|
barWidth: 30,
|
|
line:{
|
|
width:2,
|
|
color:"#1293f8"
|
|
},
|
|
item:{
|
|
radius:3,
|
|
borderColor:"#636363",
|
|
borderWidth:1,
|
|
color: "#ffffff",
|
|
alpha:1,
|
|
type:"r",
|
|
shadow:false
|
|
},
|
|
shadow:true,
|
|
gradient:false,
|
|
border:true,
|
|
labelOffset: 20,
|
|
origin:"auto",
|
|
scale: "linear"
|
|
},
|
|
_id:"webix_area_id",
|
|
on_click:{
|
|
webix_chart_legend_item: function(e,id,obj){
|
|
var series = obj.getAttribute("series_id");
|
|
if(this.callEvent("onLegendClick",[e,series,obj])){
|
|
var config = this._settings;
|
|
var values = config.legend.values;
|
|
var toggle = (values&&values[series].toggle)||config.legend.toggle;
|
|
if((typeof series != "undefined")&&this._series.length>1){
|
|
// hide action
|
|
if(toggle){
|
|
if(obj.className.indexOf("hidden")!=-1){
|
|
this.showSeries(series);
|
|
}
|
|
else{
|
|
this.hideSeries(series);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
on_dblclick:{
|
|
},
|
|
on_mouse_move:{
|
|
},
|
|
locate: function(e){
|
|
return webix.html.locate(e,this._id);
|
|
},
|
|
$setSize:function(x,y){
|
|
if(webix.ui.view.prototype.$setSize.call(this,x,y)){
|
|
for(var c in this.canvases){
|
|
this.canvases[c]._resizeCanvas(this._content_width, this._content_height);
|
|
}
|
|
this.render();
|
|
}
|
|
},
|
|
type_setter:function(val){
|
|
webix.assert(this["$render_"+val], "Chart type is not supported, or extension is not loaded: "+val);
|
|
|
|
if (typeof this._settings.offset == "undefined"){
|
|
this._settings.offset = !(val == "area" || val == "stackedArea");
|
|
}
|
|
|
|
if(val=="radar"&&!this._settings.yAxis)
|
|
this.define("yAxis",{});
|
|
if(val=="scatter"){
|
|
if(!this._settings.yAxis)
|
|
this.define("yAxis",{});
|
|
if(!this._settings.xAxis)
|
|
this.define("xAxis",{});
|
|
}
|
|
|
|
|
|
return val;
|
|
},
|
|
destructor: function(){
|
|
this.removeAllSeries();
|
|
webix.Destruction.destructor.apply(this,arguments);
|
|
},
|
|
removeAllSeries: function(){
|
|
this.clearCanvas();
|
|
if(this._legendObj){
|
|
this._legendObj.innerHTML = "";
|
|
this._legendObj.parentNode.removeChild(this._legendObj);
|
|
this._legendObj = null;
|
|
}
|
|
if(this.canvases){
|
|
this.canvases = {};
|
|
}
|
|
this._contentobj.innerHTML="";
|
|
for(var i = 0; i < this._series.length; i++){
|
|
if(this._series[i].tooltip)
|
|
this._series[i].tooltip.destructor();
|
|
}
|
|
// this.callEvent("onDestruct",[]);
|
|
this._series = [];
|
|
},
|
|
clearCanvas:function(){
|
|
if(this.canvases&&typeof this.canvases == "object")
|
|
for(var c in this.canvases){
|
|
this.canvases[c].clearCanvas();
|
|
}
|
|
},
|
|
render:function(){
|
|
var bounds, i, data, map, temp;
|
|
if (!this.isVisible(this._settings.id))
|
|
return;
|
|
|
|
if (!this.callEvent("onBeforeRender",[this.data]))
|
|
return;
|
|
if(this.canvases&&typeof this.canvases == "object"){
|
|
for(i in this.canvases){
|
|
this.canvases[i].clearCanvas();
|
|
}
|
|
}
|
|
else
|
|
this.canvases = {};
|
|
/*if(this._legendObj){
|
|
for(i=0; i < this._legend_labels.length;i++)
|
|
this._legendObj.removeChild(this._legend_labels[i]);
|
|
}
|
|
this._legend_labels = [];
|
|
*/
|
|
|
|
if(this._settings.legend){
|
|
if(!this.canvases["legend"])
|
|
this.canvases["legend"] = this._createCanvas("legend");
|
|
this._drawLegend(
|
|
this.data.getRange(),
|
|
this._content_width,
|
|
this._content_height
|
|
);
|
|
}
|
|
bounds = this._getChartBounds(this._content_width,this._content_height);
|
|
this._map = map = new webix.HtmlMap(this._id);
|
|
temp = this._settings;
|
|
|
|
if(this._series){
|
|
data = this._getChartData();
|
|
|
|
for(i=0; i < this._series.length;i++){
|
|
this._settings = this._series[i];
|
|
if(!this.canvases[i])
|
|
this.canvases[i] = this._createCanvas(i,"z-index:"+(2+i));
|
|
this["$render_"+this._settings.type](
|
|
this.canvases[i].getCanvas(),
|
|
data,
|
|
bounds.start,
|
|
bounds.end,
|
|
i,
|
|
map
|
|
);
|
|
}
|
|
}
|
|
|
|
map.render(this._contentobj);
|
|
this._contentobj.lastChild.style.zIndex = 100;
|
|
this._applyBounds(this._contentobj.lastChild,bounds);
|
|
this.callEvent("onAfterRender",[]);
|
|
this._settings = temp;
|
|
},
|
|
_applyBounds: function(elem,bounds){
|
|
var style = {};
|
|
style.left = bounds.start.x;
|
|
style.top = bounds.start.y;
|
|
style.width = bounds.end.x-bounds.start.x;
|
|
style.height = bounds.end.y - bounds.start.y;
|
|
for(var prop in style){
|
|
elem.style[prop] = style[prop]+"px";
|
|
}
|
|
},
|
|
_getChartData: function(){
|
|
var axis, axisConfig ,config, data, i, newData,
|
|
start, units, value, valuesHash;
|
|
data = this.data.getRange();
|
|
axis = (this._settings.type.toLowerCase().indexOf("barh")!=-1?"yAxis":"xAxis");
|
|
axisConfig = this._settings[axis];
|
|
if(axisConfig&&axisConfig.units&&(typeof axisConfig.units == "object")){
|
|
config = axisConfig.units;
|
|
units = [];
|
|
if(typeof config.start != "undefined"&&typeof config.end != "undefined" && typeof config.next != "undefined"){
|
|
start = config.start;
|
|
while(start<=config.end){
|
|
units.push(start);
|
|
start = config.next.call(this,start);
|
|
}
|
|
}
|
|
else if(Object.prototype.toString.call(config) === '[object Array]'){
|
|
units = config;
|
|
}
|
|
newData = [];
|
|
if(units.length){
|
|
value = axisConfig.value;
|
|
valuesHash = {};
|
|
for(i=0;i < data.length;i++){
|
|
valuesHash[value(data[i])] = i;
|
|
}
|
|
for(i=0;i< units.length;i++){
|
|
if(typeof valuesHash[units[i]]!= "undefined"){
|
|
data[valuesHash[units[i]]].$unit = units[i];
|
|
newData.push(data[valuesHash[units[i]]]);
|
|
}
|
|
else{
|
|
newData.push({$unit:units[i]});
|
|
}
|
|
}
|
|
}
|
|
return newData;
|
|
}
|
|
return data;
|
|
},
|
|
series_setter:function(config){
|
|
if(typeof config!="object"){
|
|
webix.assert(config,"Chart :: Series must be an array or object");
|
|
}
|
|
else{
|
|
|
|
this._parseSettings(!config.length?config:config[0]);
|
|
this._series = [this._settings];
|
|
|
|
|
|
for(var i=1;i< config.length;i++)
|
|
this.addSeries(config[i]);
|
|
}
|
|
return config;
|
|
},
|
|
value_setter:webix.template,
|
|
xValue_setter:webix.template,
|
|
yValue_setter:function(config){
|
|
this.define("value",config);
|
|
},
|
|
alpha_setter:webix.template,
|
|
label_setter:webix.template,
|
|
lineColor_setter:webix.template,
|
|
borderColor_setter:webix.template,
|
|
pieInnerText_setter:webix.template,
|
|
gradient_setter:function(config){
|
|
if((typeof(config)!="function")&&config&&(config === true))
|
|
config = "light";
|
|
return config;
|
|
},
|
|
colormap:{
|
|
"RAINBOW":function(obj){
|
|
var pos = Math.floor(this.getIndexById(obj.id)/this.count()*1536);
|
|
if (pos==1536) pos-=1;
|
|
return this._rainbow[Math.floor(pos/256)](pos%256);
|
|
},
|
|
|
|
"default": function(obj){
|
|
var count = this.count();
|
|
var colorsCount = this._defColors.length;
|
|
var i = this.getIndexById(obj.id);
|
|
if(colorsCount > count){
|
|
if(i){
|
|
if(i < colorsCount - count)
|
|
i = this._defColorsCursor +2;
|
|
else
|
|
i = this._defColorsCursor+1;
|
|
}
|
|
this._defColorsCursor = i;
|
|
}
|
|
else
|
|
i = i%colorsCount;
|
|
return this._defColors[i];
|
|
}
|
|
},
|
|
color_setter:function(value){
|
|
return this.colormap[value]||webix.template( value);
|
|
},
|
|
fill_setter:function(value){
|
|
return ((!value||value=="0")?false:webix.template( value));
|
|
},
|
|
_definePreset:function(obj){
|
|
this.define("preset",obj.preset);
|
|
delete obj.preset;
|
|
},
|
|
preset_setter:function(value){
|
|
var a, b, preset;
|
|
this.defaults = webix.extend({},this.defaults);
|
|
preset = this.presets[value];
|
|
|
|
if(typeof preset == "object"){
|
|
|
|
for(a in preset){
|
|
|
|
if(typeof preset[a]=="object"){
|
|
if(!this.defaults[a]||typeof this.defaults[a]!="object"){
|
|
this.defaults[a] = webix.extend({},preset[a]);
|
|
}
|
|
else{
|
|
this.defaults[a] = webix.extend({},this.defaults[a]);
|
|
for(b in preset[a]){
|
|
this.defaults[a][b] = preset[a][b];
|
|
}
|
|
}
|
|
}else{
|
|
this.defaults[a] = preset[a];
|
|
}
|
|
}
|
|
return value;
|
|
}
|
|
return false;
|
|
},
|
|
legend_setter:function( config){
|
|
if(!config){
|
|
if(this._legendObj){
|
|
this._legendObj.innerHTML = "";
|
|
this._legendObj = null;
|
|
}
|
|
return false;
|
|
}
|
|
if(typeof(config)!="object") //allow to use template string instead of object
|
|
config={template:config};
|
|
|
|
this._mergeSettings(config,{
|
|
width:150,
|
|
height:18,
|
|
layout:"y",
|
|
align:"left",
|
|
valign:"bottom",
|
|
template:"",
|
|
toggle:(this._settings.type.toLowerCase().indexOf("stacked")!=-1?"":"hide"),
|
|
marker:{
|
|
type:"square",
|
|
width:15,
|
|
height:15,
|
|
radius:3
|
|
},
|
|
margin: 4,
|
|
padding: 3
|
|
});
|
|
|
|
config.template = webix.template(config.template);
|
|
return config;
|
|
},
|
|
item_setter:function( config){
|
|
if(typeof(config)!="object")
|
|
config={color:config, borderColor:config};
|
|
this._mergeSettings(config,webix.extend({},this.defaults.item));
|
|
var settings = ["alpha","borderColor","color","radius"];
|
|
this._converToTemplate(settings,config);
|
|
return config;
|
|
},
|
|
line_setter:function( config){
|
|
if(typeof(config)!="object")
|
|
config={color:config};
|
|
|
|
config = webix.extend(config,this.defaults.line);
|
|
config.color = webix.template(config.color);
|
|
return config;
|
|
},
|
|
padding_setter:function( config){
|
|
if(typeof(config)!="object")
|
|
config={left:config, right:config, top:config, bottom:config};
|
|
this._mergeSettings(config,{
|
|
left:50,
|
|
right:20,
|
|
top:35,
|
|
bottom:40
|
|
});
|
|
return config;
|
|
},
|
|
xAxis_setter:function( config){
|
|
if(!config) return false;
|
|
if(typeof(config)!="object")
|
|
config={ template:config };
|
|
|
|
this._mergeSettings(config,{
|
|
title:"",
|
|
color:"#000000",
|
|
lineColor:"#cfcfcf",
|
|
template:"{obj}",
|
|
lines:true
|
|
});
|
|
var templates = ["lineColor","template","lines"];
|
|
this._converToTemplate(templates,config);
|
|
this._configXAxis = webix.extend({},config);
|
|
return config;
|
|
},
|
|
yAxis_setter:function( config){
|
|
this._mergeSettings(config,{
|
|
title:"",
|
|
color:"#000000",
|
|
lineColor:"#cfcfcf",
|
|
template:"{obj}",
|
|
lines:true,
|
|
bg:"#ffffff"
|
|
});
|
|
var templates = ["lineColor","template","lines","bg"];
|
|
this._converToTemplate(templates,config);
|
|
this._configYAxis = webix.extend({},config);
|
|
return config;
|
|
},
|
|
_converToTemplate:function(arr,config){
|
|
for(var i=0;i< arr.length;i++){
|
|
config[arr[i]] = webix.template(config[arr[i]]);
|
|
}
|
|
},
|
|
_createCanvas: function(name,style,container){
|
|
return new webix.Canvas({container:(container||this._contentobj),name:name,style:(style||""), width: this._content_width, height:this._content_height });
|
|
},
|
|
_drawScales:function(data,point0,point1,start,end,cellWidth){
|
|
var y = 0;
|
|
if(this._settings.yAxis){
|
|
if(!this.canvases["y"])
|
|
this.canvases["y"] = this._createCanvas("axis_y");
|
|
|
|
y = this._drawYAxis(this.canvases["y"].getCanvas(),data,point0,point1,start,end);
|
|
}
|
|
if (this._settings.xAxis){
|
|
if(!this.canvases["x"])
|
|
this.canvases["x"] = this._createCanvas("axis_x");
|
|
this._drawXAxis(this.canvases["x"].getCanvas(),data,point0,point1,cellWidth,y);
|
|
}
|
|
return y;
|
|
},
|
|
_drawXAxis:function(ctx,data,point0,point1,cellWidth,y){
|
|
var x0 = point0.x-0.5;
|
|
var y0 = parseInt((y?y:point1.y),10)+0.5;
|
|
var x1 = point1.x;
|
|
var unitPos;
|
|
var center = true;
|
|
var labelY = this._settings.type == "stackedBar"?(point1.y+0.5):y0;
|
|
|
|
for(var i=0; i < data.length;i ++){
|
|
|
|
if(this._settings.offset === true)
|
|
unitPos = x0+cellWidth/2+i*cellWidth;
|
|
else{
|
|
unitPos = (i==data.length-1)?point1.x:x0+i*cellWidth;
|
|
center = !!i;
|
|
}
|
|
unitPos = Math.ceil(unitPos)-0.5;
|
|
/*scale labels*/
|
|
var top = ((this._settings.origin!="auto")&&(this._settings.type=="bar")&&(parseFloat(this._settings.value(data[i]))<this._settings.origin));
|
|
this._drawXAxisLabel(unitPos,labelY,data[i],center,top);
|
|
/*draws a vertical line for the horizontal scale*/
|
|
|
|
if((this._settings.offset||i)&&this._settings.xAxis.lines.call(this,data[i]))
|
|
this._drawXAxisLine(ctx,unitPos,point1.y,point0.y,data[i]);
|
|
}
|
|
|
|
this.canvases["x"].renderTextAt(true, false, x0,point1.y+this._settings.padding.bottom-3,
|
|
this._settings.xAxis.title,
|
|
"webix_axis_title_x",
|
|
point1.x - point0.x
|
|
);
|
|
this._drawLine(ctx,x0,y0,x1,y0,this._settings.xAxis.color,1);
|
|
/*the right border in lines in scale are enabled*/
|
|
if (!this._settings.xAxis.lines.call(this,{}) || !this._settings.offset) return;
|
|
this._drawLine(ctx,x1+0.5,point1.y,x1+0.5,point0.y+0.5,this._settings.xAxis.color,0.2);
|
|
},
|
|
_drawYAxis:function(ctx,data,point0,point1,start,end){
|
|
var step;
|
|
var scaleParam= {};
|
|
if (!this._settings.yAxis) return;
|
|
|
|
var x0 = point0.x - 0.5;
|
|
var y0 = point1.y;
|
|
var y1 = point0.y;
|
|
var lineX = point1.y+0.5;
|
|
|
|
//this._drawLine(ctx,x0,y0,x0,y1,this._settings.yAxis.color,1);
|
|
|
|
if(this._settings.yAxis.step)
|
|
step = parseFloat(this._settings.yAxis.step);
|
|
|
|
if(typeof this._configYAxis.step =="undefined"||typeof this._configYAxis.start=="undefined"||typeof this._configYAxis.end =="undefined"){
|
|
scaleParam = this._calculateScale(start,end);
|
|
start = scaleParam.start;
|
|
end = scaleParam.end;
|
|
step = scaleParam.step;
|
|
|
|
this._settings.yAxis.end = end;
|
|
this._settings.yAxis.start = start;
|
|
}
|
|
else if(this.config.scale == "logarithmic")
|
|
this._logScaleCalc = true;
|
|
|
|
this._setYAxisTitle(point0,point1);
|
|
if(step===0) return;
|
|
if(end==start){
|
|
return y0;
|
|
}
|
|
var stepHeight = (y0-y1)*step/(end-start);
|
|
var c = 0;
|
|
for(var i = start; i<=end; i += step){
|
|
var value = this._logScaleCalc?Math.pow(10,i):i;
|
|
if (scaleParam.fixNum) value = parseFloat(value).toFixed(scaleParam.fixNum);
|
|
var yi = Math.floor(y0-c*stepHeight)+ 0.5;/*canvas line fix*/
|
|
if(!(i==start&&this._settings.origin=="auto") &&this._settings.yAxis.lines.call(this,i))
|
|
this._drawLine(ctx,x0,yi,point1.x,yi,this._settings.yAxis.lineColor.call(this,i),1);
|
|
if(i == this._settings.origin) lineX = yi;
|
|
/*correction for JS float calculation*/
|
|
if(step<1 && !this._logScaleCalc){
|
|
var power = Math.min(Math.floor(this._log10(step)),(start<=0?0:Math.floor(this._log10(start))));
|
|
var corr = Math.pow(10,-power);
|
|
value = Math.round(value*corr)/corr;
|
|
i = value;
|
|
}
|
|
this.canvases["y"].renderText(0,yi-5,
|
|
this._settings.yAxis.template(value.toString()),
|
|
"webix_axis_item_y",
|
|
point0.x-5
|
|
);
|
|
c++;
|
|
}
|
|
this._drawLine(ctx,x0,y0+1,x0,y1,this._settings.yAxis.color,1);
|
|
return lineX;
|
|
},
|
|
|
|
_setYAxisTitle:function(point0,point1){
|
|
var className = "webix_axis_title_y"+(webix._isIE&&webix._isIE !=9?" webix_ie_filter":"");
|
|
var text=this.canvases["y"].renderTextAt("middle",false,0,parseInt((point1.y-point0.y)/2+point0.y,10),this._settings.yAxis.title,className);
|
|
if (text)
|
|
text.style.left = (webix.env.transform?(text.offsetHeight-text.offsetWidth)/2:0)+"px";
|
|
},
|
|
_calculateLogScale: function(nmin,nmax){
|
|
var startPower = Math.floor(this._log10(nmin));
|
|
var endPower = Math.ceil(this._log10(nmax));
|
|
return {start: startPower, step: 1, end: endPower};
|
|
},
|
|
_calculateScale:function(nmin,nmax){
|
|
this._logScaleCalc = false;
|
|
if(this._settings.scale == "logarithmic"){
|
|
var logMin = Math.floor(this._log10(nmin));
|
|
var logMax = Math.ceil(this._log10(nmax));
|
|
if(nmin>0 && nmax > 0 && (logMax-logMin>1) ){
|
|
this._logScaleCalc = true;
|
|
return this._calculateLogScale(nmin,nmax);
|
|
}
|
|
|
|
}
|
|
if(this._settings.origin!="auto"&&this._settings.origin<nmin)
|
|
nmin = this._settings.origin;
|
|
var step,start,end;
|
|
step = ((nmax-nmin)/8)||1;
|
|
var power = Math.floor(this._log10(step));
|
|
var calculStep = Math.pow(10,power);
|
|
var stepVal = step/calculStep;
|
|
stepVal = (stepVal>5?10:5);
|
|
step = parseInt(stepVal,10)*calculStep;
|
|
|
|
if(step>Math.abs(nmin))
|
|
start = (nmin<0?-step:0);
|
|
else{
|
|
var absNmin = Math.abs(nmin);
|
|
var powerStart = Math.floor(this._log10(absNmin));
|
|
var nminVal = absNmin/Math.pow(10,powerStart);
|
|
start = Math.ceil(nminVal*10)/10*Math.pow(10,powerStart)-step;
|
|
if(absNmin>1&&step>0.1){
|
|
start = Math.ceil(start);
|
|
}
|
|
while(nmin<0?start<=nmin:start>=nmin)
|
|
start -= step;
|
|
if(nmin<0) start =-start-2*step;
|
|
|
|
}
|
|
end = start;
|
|
while(end<nmax){
|
|
end += step;
|
|
end = parseFloat((end*1.0).toFixed(Math.abs(power)));
|
|
}
|
|
return { start:start,end:end,step:step,fixNum:power<0?Math.abs(power):0 };
|
|
},
|
|
_getLimits:function(orientation,value){
|
|
var data = this.data._obj_array();
|
|
|
|
var maxValue, minValue;
|
|
var axis = ((arguments.length && orientation=="h")?this._configXAxis:this._configYAxis);
|
|
value = value||"value";
|
|
if(axis&&(typeof axis.end!="undefined")&&(typeof axis.start!="undefined")&&axis.step){
|
|
maxValue = parseFloat(axis.end);
|
|
minValue = parseFloat(axis.start);
|
|
}
|
|
else{
|
|
maxValue = webix.GroupMethods.max(this._series[0][value], data);
|
|
minValue = (axis&&(typeof axis.start!="undefined"))?parseFloat(axis.start):webix.GroupMethods.min(this._series[0][value], data);
|
|
if(this._series.length>1)
|
|
for(var i=1; i < this._series.length;i++){
|
|
var maxI = webix.GroupMethods.max(this._series[i][value], data);
|
|
var minI = webix.GroupMethods.min(this._series[i][value], data);
|
|
if (maxI > maxValue) maxValue = maxI;
|
|
if (minI < minValue) minValue = minI;
|
|
}
|
|
}
|
|
return {max:maxValue,min:minValue};
|
|
},
|
|
_log10:function(n){
|
|
var method_name="log";
|
|
return Math[method_name](n)/Math.LN10;
|
|
},
|
|
_drawXAxisLabel:function(x,y,obj,center,top){
|
|
if (!this._settings.xAxis) return;
|
|
var elem = this.canvases["x"].renderTextAt(top, center, x,y-(top?2:0),this._settings.xAxis.template(obj));
|
|
if (elem)
|
|
elem.className += " webix_axis_item_x";
|
|
},
|
|
_drawXAxisLine:function(ctx,x,y1,y2,obj){
|
|
if (!this._settings.xAxis||!this._settings.xAxis.lines) return;
|
|
this._drawLine(ctx,x,y1,x,y2,this._settings.xAxis.lineColor.call(this,obj),1);
|
|
},
|
|
_drawLine:function(ctx,x1,y1,x2,y2,color,width){
|
|
ctx.strokeStyle = color;
|
|
ctx.lineWidth = width;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x1,y1);
|
|
ctx.lineTo(x2,y2);
|
|
ctx.stroke();
|
|
ctx.lineWidth = 1;
|
|
},
|
|
_getRelativeValue:function(minValue,maxValue){
|
|
var relValue, origRelValue;
|
|
var valueFactor = 1;
|
|
if(maxValue != minValue){
|
|
relValue = maxValue - minValue;
|
|
}
|
|
else relValue = minValue;
|
|
return [relValue,valueFactor];
|
|
},
|
|
_rainbow : [
|
|
function(pos){ return "#FF"+webix.color.toHex(pos/2,2)+"00";},
|
|
function(pos){ return "#FF"+webix.color.toHex(pos/2+128,2)+"00";},
|
|
function(pos){ return "#"+webix.color.toHex(255-pos,2)+"FF00";},
|
|
function(pos){ return "#00FF"+webix.color.toHex(pos,2);},
|
|
function(pos){ return "#00"+webix.color.toHex(255-pos,2)+"FF";},
|
|
function(pos){ return "#"+webix.color.toHex(pos,2)+"00FF";}
|
|
],
|
|
_defColors : [
|
|
"#f55b50","#ff6d3f","#ffa521","#ffc927","#ffee54","#d3e153","#9acb61","#63b967",
|
|
"#21a497","#21c5da","#3ea4f5","#5868bf","#7b53c0","#a943ba","#ec3b77","#9eb0b8"
|
|
],
|
|
_defColorsCursor: 0,
|
|
/**
|
|
* adds series to the chart (value and color properties)
|
|
* @param: obj - obj with configuration properties
|
|
*/
|
|
addSeries:function(obj){
|
|
var temp = webix.extend({},this._settings);
|
|
this._settings = webix.extend({},temp);
|
|
this._parseSettings(obj,{});
|
|
this._series.push(this._settings);
|
|
this._settings = temp;
|
|
},
|
|
/*switch global settings to serit in question*/
|
|
_switchSeries:function(id, e, tag) {
|
|
var tip;
|
|
|
|
if(!tag.getAttribute("userdata"))
|
|
return;
|
|
|
|
this._active_serie = this._series.length==1?tag.getAttribute("userdata"):this._getActiveSeries(e);
|
|
if (!this._series[this._active_serie]) return;
|
|
for (var i=0; i < this._series.length; i++) {
|
|
tip = this._series[i].tooltip;
|
|
|
|
if (tip)
|
|
tip.disable();
|
|
}
|
|
if(!tag.getAttribute("disabled")){
|
|
tip = this._series[this._active_serie].tooltip;
|
|
if (tip)
|
|
tip.enable();
|
|
}
|
|
},
|
|
_getActiveSeries: function(e){
|
|
var a, areas, i, offset, pos, selection, x, y;
|
|
|
|
areas = this._map._areas;
|
|
offset = webix.html.offset(this._contentobj._htmlmap);
|
|
pos = webix.html.pos(e);
|
|
x = pos.x - offset.x;
|
|
y = pos.y - offset.y;
|
|
|
|
for( i = 0; i < areas.length; i++){
|
|
a = areas[i].points;
|
|
if(x <= a[2] && x >= a[0] && y <= a[3] && y >= a[1]){
|
|
if(selection){
|
|
if(areas[i].index > selection.index)
|
|
selection = areas[i];
|
|
}
|
|
else
|
|
selection = areas[i];
|
|
}
|
|
}
|
|
|
|
return selection?selection.index:0;
|
|
},
|
|
hideSeries:function(series){
|
|
this.canvases[series].hideCanvas();
|
|
var legend = this._settings.legend;
|
|
if(legend && legend.values && legend.values[series]){
|
|
legend.values[series].$hidden = true;
|
|
this._drawLegend();
|
|
}
|
|
},
|
|
showSeries:function(series){
|
|
this.canvases[series].showCanvas();
|
|
var legend = this._settings.legend;
|
|
if(legend && legend.values && legend.values[series]){
|
|
delete legend.values[series].$hidden;
|
|
this._drawLegend();
|
|
}
|
|
},
|
|
/**
|
|
* renders legend block
|
|
* @param: ctx - canvas object
|
|
* @param: data - object those need to be displayed
|
|
* @param: width - the width of the container
|
|
* @param: height - the height of the container
|
|
*/
|
|
_drawLegend:function(data,width){
|
|
/*position of the legend block*/
|
|
var i, legend, legendContainer, legendHeight, legendItems, legendWidth, style,
|
|
x=0, y= 0, ctx, itemColor, disabled, item;
|
|
|
|
data = data||[];
|
|
width = width||this._content_width;
|
|
ctx = this.canvases["legend"].getCanvas();
|
|
/*legend config*/
|
|
legend = this._settings.legend;
|
|
/*the legend sizes*/
|
|
|
|
style = (this._settings.legend.layout!="x"?"width:"+legend.width+"px":"");
|
|
/*creation of legend container*/
|
|
|
|
if(this._legendObj){
|
|
|
|
this._legendObj.innerHTML = "";
|
|
this._legendObj.parentNode.removeChild(this._legendObj);
|
|
}
|
|
this.canvases["legend"].clearCanvas(true);
|
|
|
|
legendContainer = webix.html.create("DIV",{
|
|
"class":"webix_chart_legend",
|
|
"style":"left:"+x+"px; top:"+y+"px;"+style
|
|
},"");
|
|
if(legend.padding){
|
|
legendContainer.style.padding = legend.padding+"px";
|
|
}
|
|
this._legendObj = legendContainer;
|
|
this._contentobj.appendChild(legendContainer);
|
|
|
|
/*rendering legend text items*/
|
|
legendItems = [];
|
|
if(!legend.values)
|
|
for(i = 0; i < data.length; i++){
|
|
legendItems.push(this._drawLegendText(legendContainer,legend.template(data[i])));
|
|
}
|
|
else
|
|
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";
|
|
legendWidth = legendContainer.offsetWidth;
|
|
legendHeight = legendContainer.offsetHeight;
|
|
|
|
/*this._settings.legend.width = legendWidth;
|
|
this._settings.legend.height = legendHeight;*/
|
|
/*setting legend position*/
|
|
if(legendWidth<width){
|
|
if(legend.layout == "x"&&legend.align == "center"){
|
|
x = (width-legendWidth)/2;
|
|
}
|
|
if(legend.align == "right"){
|
|
x = width-legendWidth;
|
|
}
|
|
if(legend.margin&&legend.align != "center"){
|
|
x += (legend.align == "left"?1:-1)*legend.margin;
|
|
}
|
|
}
|
|
|
|
if(legendHeight<this._content_height){
|
|
if(legend.valign == "middle"&&legend.align != "center"&&legend.layout != "x")
|
|
y = (this._content_height-legendHeight)/2;
|
|
else if(legend.valign == "bottom")
|
|
y = this._content_height-legendHeight;
|
|
if(legend.margin&&legend.valign != "middle"){
|
|
y += (legend.valign == "top"?1:-1)*legend.margin;
|
|
}
|
|
}
|
|
legendContainer.style.left = x+"px";
|
|
legendContainer.style.top = y+"px";
|
|
|
|
/*drawing colorful markers*/
|
|
ctx.save();
|
|
for(i = 0; i < legendItems.length; i++){
|
|
item = legendItems[i];
|
|
if(legend.values&&legend.values[i].$hidden){
|
|
disabled = true;
|
|
itemColor = (legend.values[i].disableColor?legend.values[i].disableColor:"#d9d9d9");
|
|
}
|
|
else{
|
|
disabled = false;
|
|
itemColor = (legend.values?legend.values[i].color:this._settings.color.call(this,data[i]));
|
|
}
|
|
this._drawLegendMarker(ctx,item.offsetLeft+x,item.offsetTop+y,itemColor,item.offsetHeight,disabled,i);
|
|
}
|
|
ctx.restore();
|
|
legendItems = null;
|
|
},
|
|
/**
|
|
* appends legend item to legend block
|
|
* @param: ctx - canvas object
|
|
* @param: obj - data object that needs being represented
|
|
*/
|
|
_drawLegendText:function(cont,value,series,disabled){
|
|
var style = "";
|
|
if(this._settings.legend.layout=="x")
|
|
style = "float:left;";
|
|
/*the text of the legend item*/
|
|
var text = webix.html.create("DIV",{
|
|
"style":style+"padding-left:"+(10+this._settings.legend.marker.width)+"px",
|
|
"class":"webix_chart_legend_item"+(disabled?" hidden":"")
|
|
},value);
|
|
if(arguments.length>2)
|
|
text.setAttribute("series_id",series);
|
|
cont.appendChild(text);
|
|
return text;
|
|
},
|
|
/**
|
|
* draw legend colorful marder
|
|
* @param: ctx - canvas object
|
|
* @param: x - the horizontal position of the marker
|
|
* @param: y - the vertical position of the marker
|
|
* @param: obj - data object which color needs being used
|
|
*/
|
|
_drawLegendMarker:function(ctx,x,y,color,height,disabled,i){
|
|
var p = [];
|
|
var marker = this._settings.legend.marker;
|
|
var values = this._settings.legend.values;
|
|
var type = (values&&values[i].markerType?values[i].markerType:marker.type);
|
|
if(color){
|
|
ctx.strokeStyle = ctx.fillStyle = color;
|
|
}
|
|
|
|
if(type=="round"||!marker.radius){
|
|
ctx.beginPath();
|
|
ctx.lineWidth = marker.height;
|
|
ctx.lineCap = marker.type;
|
|
/*start of marker*/
|
|
x += ctx.lineWidth/2+5;
|
|
y += height/2;
|
|
ctx.moveTo(x,y);
|
|
var x1 = x + marker.width-marker.height +1;
|
|
ctx.lineTo(x1,y);
|
|
ctx.stroke();
|
|
ctx.fill();
|
|
|
|
}
|
|
else if(type=="item"){
|
|
/*copy of line*/
|
|
if(this._settings.line&&this._settings.type != "scatter" && !this._settings.disableLines){
|
|
ctx.beginPath();
|
|
ctx.lineWidth = this._series[i].line.width;
|
|
ctx.strokeStyle = disabled?color:this._series[i].line.color.call(this,{});
|
|
var x0 = x + 5;
|
|
var y0 = y + height/2;
|
|
ctx.moveTo(x0,y0);
|
|
var x1 = x0 + marker.width;
|
|
ctx.lineTo(x1,y0);
|
|
ctx.stroke();
|
|
}
|
|
/*item copy*/
|
|
var config = this._series[i].item;
|
|
var radius = parseInt(config.radius.call(this,{}),10)||0;
|
|
if(radius){
|
|
ctx.beginPath();
|
|
if(disabled){
|
|
ctx.lineWidth = config.borderWidth;
|
|
ctx.strokeStyle = color;
|
|
ctx.fillStyle = color;
|
|
}
|
|
else{
|
|
ctx.lineWidth = config.borderWidth;
|
|
ctx.fillStyle = config.color.call(this,{});
|
|
ctx.strokeStyle = config.borderColor.call(this,{});
|
|
ctx.globalAlpha = config.alpha.call(this,{});
|
|
}
|
|
ctx.beginPath();
|
|
x += marker.width/2+5;
|
|
y += height/2;
|
|
this._strokeChartItem(ctx,x,y,radius+1,config.type);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
}
|
|
ctx.globalAlpha = 1;
|
|
}else{
|
|
ctx.beginPath();
|
|
ctx.lineWidth = 1;
|
|
x += 5;
|
|
y += height/2-marker.height/2;
|
|
p = [
|
|
[x+marker.radius,y+marker.radius,marker.radius,Math.PI,3*Math.PI/2,false],
|
|
[x+marker.width-marker.radius,y],
|
|
[x+marker.width-marker.radius,y+marker.radius,marker.radius,-Math.PI/2,0,false],
|
|
[x+marker.width,y+marker.height-marker.radius],
|
|
[x+marker.width-marker.radius,y+marker.height-marker.radius,marker.radius,0,Math.PI/2,false],
|
|
[x+marker.radius,y+marker.height],
|
|
[x+marker.radius,y+marker.height-marker.radius,marker.radius,Math.PI/2,Math.PI,false],
|
|
[x,y+marker.radius]
|
|
];
|
|
this._path(ctx,p);
|
|
ctx.stroke();
|
|
ctx.fill();
|
|
}
|
|
|
|
},
|
|
/**
|
|
* gets the points those represent chart left top and right bottom bounds
|
|
* @param: width - the width of the chart container
|
|
* @param: height - the height of the chart container
|
|
*/
|
|
_getChartBounds:function(width,height){
|
|
var chartX0, chartY0, chartX1, chartY1;
|
|
|
|
chartX0 = this._settings.padding.left;
|
|
chartY0 = this._settings.padding.top;
|
|
chartX1 = width - this._settings.padding.right;
|
|
chartY1 = height - this._settings.padding.bottom;
|
|
|
|
if(this._settings.legend){
|
|
var legend = this._settings.legend;
|
|
/*legend size*/
|
|
var legendWidth = this._settings.legend.width;
|
|
var legendHeight = this._settings.legend.height;
|
|
|
|
/*if legend is horizontal*/
|
|
if(legend.layout == "x"){
|
|
if(legend.valign == "center"){
|
|
if(legend.align == "right")
|
|
chartX1 -= legendWidth;
|
|
else if(legend.align == "left")
|
|
chartX0 += legendWidth;
|
|
}
|
|
else if(legend.valign == "bottom"){
|
|
chartY1 -= legendHeight;
|
|
}
|
|
else{
|
|
chartY0 += legendHeight;
|
|
}
|
|
}
|
|
/*vertical scale*/
|
|
else{
|
|
if(legend.align == "right")
|
|
chartX1 -= legendWidth;
|
|
else if(legend.align == "left")
|
|
chartX0 += legendWidth;
|
|
}
|
|
}
|
|
return {start:{x:chartX0,y:chartY0},end:{x:chartX1,y:chartY1}};
|
|
},
|
|
/**
|
|
* gets the maximum and minimum values for the stacked chart
|
|
* @param: data - data set
|
|
*/
|
|
_getStackedLimits:function(data){
|
|
var i, j, maxValue, minValue, value;
|
|
if(this._settings.yAxis&&(typeof this._settings.yAxis.end!="undefined")&&(typeof this._settings.yAxis.start!="undefined")&&this._settings.yAxis.step){
|
|
maxValue = parseFloat(this._settings.yAxis.end);
|
|
minValue = parseFloat(this._settings.yAxis.start);
|
|
}
|
|
else{
|
|
for(i=0; i < data.length; i++){
|
|
data[i].$sum = 0 ;
|
|
data[i].$min = Infinity;
|
|
for(j =0; j < this._series.length;j++){
|
|
value = parseFloat(this._series[j].value(data[i])||0);
|
|
if(isNaN(value)) continue;
|
|
if(this._series[j].type.toLowerCase().indexOf("stacked")!=-1)
|
|
data[i].$sum += value;
|
|
if(value < data[i].$min) data[i].$min = value;
|
|
}
|
|
}
|
|
maxValue = -Infinity;
|
|
minValue = Infinity;
|
|
for(i=0; i < data.length; i++){
|
|
if (data[i].$sum > maxValue) maxValue = data[i].$sum ;
|
|
if (data[i].$min < minValue) minValue = data[i].$min ;
|
|
}
|
|
if(minValue>0) minValue =0;
|
|
}
|
|
return {max: maxValue, min: minValue};
|
|
},
|
|
/*adds colors to the gradient object*/
|
|
_setBarGradient:function(ctx,x1,y1,x2,y2,type,color,axis){
|
|
var gradient, offset, rgb, hsv, color0, stops;
|
|
if(type == "light"){
|
|
if(axis == "x")
|
|
gradient = ctx.createLinearGradient(x1,y1,x2,y1);
|
|
else
|
|
gradient = ctx.createLinearGradient(x1,y1,x1,y2);
|
|
stops = [[0,"#FFFFFF"],[0.9,color],[1,color]];
|
|
offset = 2;
|
|
}
|
|
else if(type == "falling"||type == "rising"){
|
|
if(axis == "x")
|
|
gradient = ctx.createLinearGradient(x1,y1,x2,y1);
|
|
else
|
|
gradient = ctx.createLinearGradient(x1,y1,x1,y2);
|
|
rgb = webix.color.toRgb(color);
|
|
hsv = webix.color.rgbToHsv(rgb[0],rgb[1],rgb[2]);
|
|
hsv[1] *= 1/2;
|
|
color0 = "rgb("+webix.color.hsvToRgb(hsv[0],hsv[1],hsv[2])+")";
|
|
if(type == "falling"){
|
|
stops = [[0,color0],[0.7,color],[1,color]];
|
|
}
|
|
else if(type == "rising"){
|
|
stops = [[0,color],[0.3,color],[1,color0]];
|
|
}
|
|
offset = 0;
|
|
}
|
|
else{
|
|
ctx.globalAlpha = 0.37;
|
|
offset = 0;
|
|
if(axis == "x")
|
|
gradient = ctx.createLinearGradient(x1,y2,x1,y1);
|
|
else
|
|
gradient = ctx.createLinearGradient(x1,y1,x2,y1);
|
|
stops = [[0,"#9d9d9d"],[0.3,"#e8e8e8"],[0.45,"#ffffff"],[0.55,"#ffffff"],[0.7,"#e8e8e8"],[1,"#9d9d9d"]];
|
|
}
|
|
this._gradient(gradient,stops);
|
|
return {gradient: gradient,offset: offset};
|
|
},
|
|
/**
|
|
* returns the x and y position
|
|
* @param: a - angle
|
|
* @param: x - start x position
|
|
* @param: y - start y position
|
|
* @param: r - destination to the point
|
|
*/
|
|
_getPositionByAngle:function(a,x,y,r){
|
|
a *= (-1);
|
|
x = x+Math.cos(a)*r;
|
|
y = y-Math.sin(a)*r;
|
|
return {x:x,y:y};
|
|
},
|
|
_gradient:function(gradient,stops){
|
|
for(var i=0; i< stops.length; i++){
|
|
gradient.addColorStop(stops[i][0],stops[i][1]);
|
|
}
|
|
},
|
|
_path: function(ctx,points){
|
|
var i, method;
|
|
for(i = 0; i< points.length; i++){
|
|
method = (i?"lineTo":"moveTo");
|
|
if(points[i].length>2)
|
|
method = "arc";
|
|
ctx[method].apply(ctx,points[i]);
|
|
}
|
|
},
|
|
_addMapRect:function(map,id,points,bounds,sIndex){
|
|
map.addRect(id,[points[0].x-bounds.x,points[0].y-bounds.y,points[1].x-bounds.x,points[1].y-bounds.y],sIndex);
|
|
}
|
|
}, webix.Group, webix.AutoTooltip, webix.DataLoader, webix.MouseEvents, webix.EventSystem , webix.ui.view);
|
|
|
|
|
|
webix.extend(webix.ui.chart, {
|
|
$render_pie:function(ctx,data,x,y,sIndex,map){
|
|
this._renderPie(ctx,data,x,y,1,map,sIndex);
|
|
|
|
},
|
|
/**
|
|
* renders a pie chart
|
|
* @param: ctx - canvas object
|
|
* @param: data - object those need to be displayed
|
|
* @param: x - the width of the container
|
|
* @param: y - the height of the container
|
|
* @param: ky - value from 0 to 1 that defines an angle of inclination (0<ky<1 - 3D chart)
|
|
*/
|
|
_renderPie:function(ctx,data,point0,point1,ky,map,sIndex){
|
|
if(!data.length)
|
|
return;
|
|
var coord = this._getPieParameters(point0,point1);
|
|
/*pie radius*/
|
|
var radius = (this._settings.radius?this._settings.radius:coord.radius);
|
|
if(radius<0)
|
|
return;
|
|
|
|
/*real values*/
|
|
var values = this._getValues(data);
|
|
|
|
var totalValue = this._getTotalValue(values);
|
|
|
|
/*weighed values (the ratio of object value to total value)*/
|
|
var ratios = this._getRatios(values,totalValue);
|
|
|
|
/*pie center*/
|
|
var x0 = (this._settings.x?this._settings.x:coord.x);
|
|
var y0 = (this._settings.y?this._settings.y:coord.y);
|
|
/*adds shadow to the 2D pie*/
|
|
if(ky==1&&this._settings.shadow)
|
|
this._addShadow(ctx,x0,y0,radius);
|
|
|
|
/*changes vertical position of the center according to 3Dpie cant*/
|
|
y0 = y0/ky;
|
|
/*the angle defines the 1st edge of the sector*/
|
|
var alpha0 = -Math.PI/2;
|
|
var angles = [];
|
|
/*changes Canvas vertical scale*/
|
|
ctx.scale(1,ky);
|
|
/*adds radial gradient to a pie*/
|
|
if (this._settings.gradient){
|
|
var x1 = (ky!=1?x0+radius/3:x0);
|
|
var y1 = (ky!=1?y0+radius/3:y0);
|
|
this._showRadialGradient(ctx,x0,y0,radius,x1,y1);
|
|
}
|
|
for(var i = 0; i < data.length;i++){
|
|
if (!values[i]) continue;
|
|
/*drawing sector*/
|
|
//ctx.lineWidth = 2;
|
|
ctx.strokeStyle = this._settings.lineColor.call(this,data[i]);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x0,y0);
|
|
angles.push(alpha0);
|
|
/*the angle defines the 2nd edge of the sector*/
|
|
var alpha1 = -Math.PI/2+ratios[i]-0.0001;
|
|
ctx.arc(x0,y0,radius,alpha0,alpha1,false);
|
|
ctx.lineTo(x0,y0);
|
|
|
|
var color = this._settings.color.call(this,data[i]);
|
|
ctx.fillStyle = color;
|
|
ctx.fill();
|
|
|
|
/*text that needs being displayed inside the sector*/
|
|
if(this._settings.pieInnerText)
|
|
this._drawSectorLabel(x0,y0,5*radius/6,alpha0,alpha1,ky,this._settings.pieInnerText(data[i],totalValue),true);
|
|
/*label outside the sector*/
|
|
if(this._settings.label)
|
|
this._drawSectorLabel(x0,y0,radius+this._settings.labelOffset,alpha0,alpha1,ky,this._settings.label(data[i]));
|
|
/*drawing lower part for 3D pie*/
|
|
if(ky!=1){
|
|
this._createLowerSector(ctx,x0,y0,alpha0,alpha1,radius,true);
|
|
ctx.fillStyle = "#000000";
|
|
ctx.globalAlpha = 0.2;
|
|
this._createLowerSector(ctx,x0,y0,alpha0,alpha1,radius,false);
|
|
ctx.globalAlpha = 1;
|
|
ctx.fillStyle = color;
|
|
}
|
|
/*creats map area (needed for events)*/
|
|
map.addSector(data[i].id,alpha0,alpha1,x0-point0.x,y0-point0.y/ky,radius,ky,sIndex);
|
|
|
|
alpha0 = alpha1;
|
|
}
|
|
/*renders radius lines and labels*/
|
|
ctx.globalAlpha = 0.8;
|
|
var p;
|
|
for(i=0;i< angles.length;i++){
|
|
p = this._getPositionByAngle(angles[i],x0,y0,radius);
|
|
this._drawLine(ctx,x0,y0,p.x,p.y,this._settings.lineColor.call(this,data[i]),2);
|
|
}
|
|
if(ky==1){
|
|
ctx.lineWidth = 2;
|
|
ctx.strokeStyle = "#ffffff";
|
|
ctx.beginPath();
|
|
ctx.arc(x0,y0,radius+1,0,2*Math.PI,false);
|
|
ctx.stroke();
|
|
}
|
|
ctx.globalAlpha =1;
|
|
|
|
ctx.scale(1,1/ky);
|
|
},
|
|
/**
|
|
* returns list of values
|
|
* @param: data array
|
|
*/
|
|
_getValues:function(data){
|
|
var v = [];
|
|
for(var i = 0; i < data.length;i++)
|
|
v.push(parseFloat(this._settings.value(data[i])||0));
|
|
return v;
|
|
},
|
|
/**
|
|
* returns total value
|
|
* @param: the array of values
|
|
*/
|
|
_getTotalValue:function(values){
|
|
var t=0;
|
|
for(var i = 0; i < values.length;i++)
|
|
t += values[i];
|
|
return t;
|
|
},
|
|
/**
|
|
* gets angles for all values
|
|
* @param: the array of values
|
|
* @param: total value (optional)
|
|
*/
|
|
_getRatios:function(values,totalValue){
|
|
var value;
|
|
var ratios = [];
|
|
var prevSum = 0;
|
|
totalValue = totalValue||this._getTotalValue(values);
|
|
for(var i = 0; i < values.length;i++){
|
|
value = values[i];
|
|
|
|
ratios[i] = Math.PI*2*(totalValue?((value+prevSum)/totalValue):(1/values.length));
|
|
prevSum += value;
|
|
}
|
|
return ratios;
|
|
},
|
|
/**
|
|
* returns calculated pie parameters: center position and radius
|
|
* @param: x - the width of a container
|
|
* @param: y - the height of a container
|
|
*/
|
|
_getPieParameters:function(point0,point1){
|
|
/*var offsetX = 0;
|
|
var offsetY = 0;
|
|
if(this._settings.legend &&this._settings.legend.layout!="x")
|
|
offsetX = this._settings.legend.width*(this._settings.legend.align=="right"?-1:1);
|
|
var x0 = (x + offsetX)/2;
|
|
if(this._settings.legend &&this._settings.legend.layout=="x")
|
|
offsetY = this._settings.legend.height*(this._settings.legend.valign=="bottom"?-1:1);
|
|
var y0 = (y+offsetY)/2;*/
|
|
var width = point1.x-point0.x;
|
|
var height = point1.y-point0.y;
|
|
var x0 = point0.x+width/2;
|
|
var y0 = point0.y+height/2;
|
|
var radius = Math.min(width/2,height/2);
|
|
return {"x":x0,"y":y0,"radius":radius};
|
|
},
|
|
/**
|
|
* creates lower part of sector in 3Dpie
|
|
* @param: ctx - canvas object
|
|
* @param: x0 - the horizontal position of the pie center
|
|
* @param: y0 - the vertical position of the pie center
|
|
* @param: a0 - the angle that defines the first edge of a sector
|
|
* @param: a1 - the angle that defines the second edge of a sector
|
|
* @param: R - pie radius
|
|
* @param: line (boolean) - if the sector needs a border
|
|
*/
|
|
_createLowerSector:function(ctx,x0,y0,a1,a2,R,line){
|
|
ctx.lineWidth = 1;
|
|
/*checks if the lower sector needs being displayed*/
|
|
if(!((a1<=0 && a2>=0)||(a1>=0 && a2<=Math.PI)||(Math.abs(a1-Math.PI)>0.003&&a1<=Math.PI && a2>=Math.PI))) return;
|
|
|
|
if(a1<=0 && a2>=0){
|
|
a1 = 0;
|
|
line = false;
|
|
this._drawSectorLine(ctx,x0,y0,R,a1,a2);
|
|
}
|
|
if(a1<=Math.PI && a2>=Math.PI){
|
|
a2 = Math.PI;
|
|
line = false;
|
|
this._drawSectorLine(ctx,x0,y0,R,a1,a2);
|
|
}
|
|
/*the height of 3D pie*/
|
|
var offset = (this._settings.pieHeight||Math.floor(R/4))/this._settings.cant;
|
|
ctx.beginPath();
|
|
ctx.arc(x0,y0,R,a1,a2,false);
|
|
ctx.lineTo(x0+R*Math.cos(a2),y0+R*Math.sin(a2)+offset);
|
|
ctx.arc(x0,y0+offset,R,a2,a1,true);
|
|
ctx.lineTo(x0+R*Math.cos(a1),y0+R*Math.sin(a1));
|
|
ctx.fill();
|
|
if(line)
|
|
ctx.stroke();
|
|
},
|
|
/**
|
|
* draws a serctor arc
|
|
*/
|
|
_drawSectorLine:function(ctx,x0,y0,R,a1,a2){
|
|
ctx.beginPath();
|
|
ctx.arc(x0,y0,R,a1,a2,false);
|
|
ctx.stroke();
|
|
},
|
|
/**
|
|
* adds a shadow to pie
|
|
* @param: ctx - canvas object
|
|
* @param: x - the horizontal position of the pie center
|
|
* @param: y - the vertical position of the pie center
|
|
* @param: R - pie radius
|
|
*/
|
|
_addShadow:function(ctx,x,y,R){
|
|
ctx.globalAlpha = 0.5;
|
|
var shadows = ["#c4c4c4","#c6c6c6","#cacaca","#dcdcdc","#dddddd","#e0e0e0","#eeeeee","#f5f5f5","#f8f8f8"];
|
|
for(var i = shadows.length-1;i>-1;i--){
|
|
ctx.beginPath();
|
|
ctx.fillStyle = shadows[i];
|
|
ctx.arc(x+1,y+1,R+i,0,Math.PI*2,true);
|
|
ctx.fill();
|
|
}
|
|
ctx.globalAlpha = 1;
|
|
},
|
|
/**
|
|
* returns a gray gradient
|
|
* @param: gradient - gradient object
|
|
*/
|
|
_getGrayGradient:function(gradient){
|
|
gradient.addColorStop(0.0,"#ffffff");
|
|
gradient.addColorStop(0.7,"#7a7a7a");
|
|
gradient.addColorStop(1.0,"#000000");
|
|
return gradient;
|
|
},
|
|
/**
|
|
* adds gray radial gradient
|
|
* @param: ctx - canvas object
|
|
* @param: x - the horizontal position of the pie center
|
|
* @param: y - the vertical position of the pie center
|
|
* @param: radius - pie radius
|
|
* @param: x0 - the horizontal position of a gradient center
|
|
* @param: y0 - the vertical position of a gradient center
|
|
*/
|
|
_showRadialGradient:function(ctx,x,y,radius,x0,y0){
|
|
//ctx.globalAlpha = 0.3;
|
|
ctx.beginPath();
|
|
var gradient;
|
|
if(typeof this._settings.gradient!= "function"){
|
|
gradient = ctx.createRadialGradient(x0,y0,radius/4,x,y,radius);
|
|
gradient = this._getGrayGradient(gradient);
|
|
}
|
|
else gradient = this._settings.gradient(gradient);
|
|
ctx.fillStyle = gradient;
|
|
ctx.arc(x,y,radius,0,Math.PI*2,true);
|
|
ctx.fill();
|
|
//ctx.globalAlpha = 1;
|
|
ctx.globalAlpha = 0.7;
|
|
},
|
|
/**
|
|
* returns the calculates pie parameters: center position and radius
|
|
* @param: ctx - canvas object
|
|
* @param: x0 - the horizontal position of the pie center
|
|
* @param: y0 - the vertical position of the pie center
|
|
* @param: R - pie radius
|
|
* @param: alpha1 - the angle that defines the 1st edge of a sector
|
|
* @param: alpha2 - the angle that defines the 2nd edge of a sector
|
|
* @param: ky - the value that defines an angle of inclination
|
|
* @param: text - label text
|
|
* @param: in_width (boolean) - if label needs being displayed inside a pie
|
|
*/
|
|
_drawSectorLabel:function(x0,y0,R,alpha1,alpha2,ky,text,in_width){
|
|
var t = this.canvases[0].renderText(0,0,text,0,1);
|
|
if (!t) return;
|
|
|
|
//get existing width of text
|
|
var labelWidth = t.scrollWidth;
|
|
t.style.width = labelWidth+"px"; //adjust text label to fit all text
|
|
if (labelWidth>x0) labelWidth = x0; //the text can't be greater than half of view
|
|
|
|
//calculate expected correction based on default font metrics
|
|
var width = (alpha2-alpha1<0.2?4:8);
|
|
if (in_width) width = labelWidth/1.8;
|
|
var alpha = alpha1+(alpha2-alpha1)/2;
|
|
|
|
//position and its correction
|
|
R = R-(width-8)/2;
|
|
var corr_x = - width;
|
|
var corr_y = -8;
|
|
var align = "right";
|
|
|
|
//for items in left upper and lower sector
|
|
if(alpha>=Math.PI/2 && alpha<Math.PI || alpha<=3*Math.PI/2 && alpha>=Math.PI){
|
|
corr_x = -labelWidth-corr_x+1;/*correction for label width*/
|
|
align = "left";
|
|
}
|
|
|
|
/*
|
|
calculate position of text
|
|
basically get point at center of pie sector
|
|
*/
|
|
var offset = 0;
|
|
|
|
if(!in_width&&ky<1&&(alpha>0&&alpha<Math.PI))
|
|
offset = (this._settings.height||Math.floor(R/4))/ky;
|
|
|
|
var y = (y0+Math.floor((R+offset)*Math.sin(alpha)))*ky+corr_y;
|
|
var x = x0+Math.floor((R+width/2)*Math.cos(alpha))+corr_x;
|
|
|
|
/*
|
|
if pie sector starts in left of right part pie,
|
|
related text must be placed to the left of to the right of pie as well
|
|
*/
|
|
var left_end = (alpha2 < Math.PI/2+0.01);
|
|
var left_start = (alpha1 < Math.PI/2);
|
|
if (left_start && left_end){
|
|
x = Math.max(x,x0+3); //right part of pie
|
|
/*if(alpha2-alpha1<0.2)
|
|
x = x0;*/
|
|
}
|
|
else if (!left_start && !left_end)
|
|
x = Math.min(x,x0-labelWidth); //left part of pie
|
|
else if (!in_width&&(alpha>=Math.PI/2 && alpha<Math.PI || alpha<=3*Math.PI/2 && alpha>=Math.PI)){
|
|
x += labelWidth/3;
|
|
}
|
|
|
|
|
|
//we need to set position of text manually, based on above calculations
|
|
t.style.top = y+"px";
|
|
t.style.left = x+"px";
|
|
t.style.width = labelWidth+"px";
|
|
t.style.textAlign = align;
|
|
t.style.whiteSpace = "nowrap";
|
|
},
|
|
$render_pie3D:function(ctx,data,x,y,sIndex,map){
|
|
this._renderPie(ctx,data,x,y,this._settings.cant,map);
|
|
},
|
|
$render_donut:function(ctx,data,point0,point1,sIndex,map){
|
|
if(!data.length)
|
|
return;
|
|
this._renderPie(ctx,data,point0,point1,1,map,sIndex);
|
|
var config = this._settings;
|
|
var coord = this._getPieParameters(point0,point1);
|
|
var pieRadius = (config.radius?config.radius:coord.radius);
|
|
var innerRadius = ((config.innerRadius&&(config.innerRadius<pieRadius))?config.innerRadius:pieRadius/3);
|
|
var x0 = (config.x?config.x:coord.x);
|
|
var y0 = (config.y?config.y:coord.y);
|
|
ctx.fillStyle = "#ffffff";
|
|
ctx.beginPath();
|
|
ctx.arc(x0,y0,innerRadius,0,Math.PI*2,true);
|
|
ctx.fill();
|
|
}
|
|
});
|
|
//+pie3d
|
|
webix.extend(webix.ui.chart, {
|
|
/**
|
|
* renders a bar chart
|
|
* @param: ctx - canvas object
|
|
* @param: data - object those need to be displayed
|
|
* @param: x - the width of the container
|
|
* @param: y - the height of the container
|
|
* @param: sIndex - index of drawing chart
|
|
*/
|
|
$render_bar:function(ctx, data, point0, point1, sIndex, map){
|
|
var barWidth, cellWidth,
|
|
i,
|
|
limits, maxValue, minValue,
|
|
relValue, valueFactor, relativeValues,
|
|
startValue, unit,
|
|
xax, yax,
|
|
totalHeight = point1.y-point0.y;
|
|
|
|
yax = !!this._settings.yAxis;
|
|
xax = !!this._settings.xAxis;
|
|
|
|
limits = this._getLimits();
|
|
maxValue = limits.max;
|
|
minValue = limits.min;
|
|
|
|
/*an available width for one bar*/
|
|
cellWidth = (point1.x-point0.x)/data.length;
|
|
|
|
|
|
/*draws x and y scales*/
|
|
if(!sIndex&&!(this._settings.origin!="auto"&&!yax)){
|
|
this._drawScales(data,point0, point1,minValue,maxValue,cellWidth);
|
|
}
|
|
|
|
/*necessary for automatic scale*/
|
|
if(yax){
|
|
maxValue = parseFloat(this._settings.yAxis.end);
|
|
minValue = parseFloat(this._settings.yAxis.start);
|
|
}
|
|
|
|
/*unit calculation (bar_height = value*unit)*/
|
|
relativeValues = this._getRelativeValue(minValue,maxValue);
|
|
relValue = relativeValues[0];
|
|
valueFactor = relativeValues[1];
|
|
|
|
unit = (relValue?totalHeight/relValue:relValue);
|
|
|
|
if(!yax&&!(this._settings.origin!="auto"&&xax)){
|
|
/*defines start value for better representation of small values*/
|
|
startValue = 10;
|
|
unit = (relValue?(totalHeight-startValue)/relValue:startValue);
|
|
}
|
|
/*if yAxis isn't set, but with custom origin */
|
|
if(!sIndex&&(this._settings.origin!="auto"&&!yax)&&this._settings.origin>minValue){
|
|
this._drawXAxis(ctx,data,point0,point1,cellWidth,point1.y-unit*(this._settings.origin-minValue));
|
|
}
|
|
|
|
/*a real bar width */
|
|
barWidth = parseInt(this._settings.barWidth,10);
|
|
var seriesNumber = 0;
|
|
var seriesIndex = 0;
|
|
for(i=0; i<this._series.length; i++ ){
|
|
if(i == sIndex){
|
|
seriesIndex = seriesNumber;
|
|
}
|
|
if(this._series[i].type == "bar")
|
|
seriesNumber++;
|
|
}
|
|
if(this._series&&(barWidth*seriesNumber+4)>cellWidth) barWidth = parseInt(cellWidth/seriesNumber-4,10);
|
|
|
|
/*the half of distance between bars*/
|
|
var barOffset = (cellWidth - barWidth*seriesNumber)/2;
|
|
|
|
/*the radius of rounding in the top part of each bar*/
|
|
var radius = (typeof this._settings.radius!="undefined"?parseInt(this._settings.radius,10):Math.round(barWidth/5));
|
|
|
|
var inner_gradient = false;
|
|
var gradient = this._settings.gradient;
|
|
|
|
if(gradient && typeof(gradient) != "function"){
|
|
inner_gradient = gradient;
|
|
gradient = false;
|
|
} else if (gradient){
|
|
gradient = ctx.createLinearGradient(0,point1.y,0,point0.y);
|
|
this._settings.gradient(gradient);
|
|
}
|
|
/*draws a black line if the horizontal scale isn't defined*/
|
|
if(!xax){
|
|
this._drawLine(ctx,point0.x,point1.y+0.5,point1.x,point1.y+0.5,"#000000",1); //hardcoded color!
|
|
}
|
|
|
|
for(i=0; i < data.length;i ++){
|
|
|
|
var value = parseFloat(this._settings.value(data[i])||0);
|
|
if(this._logScaleCalc)
|
|
value = this._log10(value);
|
|
|
|
if(isNaN(value))
|
|
continue;
|
|
if(value>maxValue) value = maxValue;
|
|
value -= minValue;
|
|
value *= valueFactor;
|
|
|
|
/*start point (bottom left)*/
|
|
var x0 = point0.x + barOffset + i*cellWidth+(barWidth+1)*seriesIndex;
|
|
var y0 = point1.y;
|
|
|
|
if(value<0||(this._settings.yAxis&&value===0&&!(this._settings.origin!="auto"&&this._settings.origin>minValue))){
|
|
this.canvases[sIndex].renderTextAt(true, true, x0+Math.floor(barWidth/2),y0,this._settings.label(data[i]));
|
|
continue;
|
|
}
|
|
|
|
/*takes start value into consideration*/
|
|
if(!yax&&!(this._settings.origin!="auto"&&xax)) value += startValue/unit;
|
|
|
|
var color = gradient||this._settings.color.call(this,data[i]);
|
|
|
|
|
|
/*drawing bar body*/
|
|
ctx.globalAlpha = this._settings.alpha.call(this,data[i]);
|
|
var points = this._drawBar(ctx,point0,x0,y0,barWidth,minValue,radius,unit,value,color,gradient,inner_gradient);
|
|
if (inner_gradient){
|
|
this._drawBarGradient(ctx,x0,y0,barWidth,minValue,radius,unit,value,color,inner_gradient);
|
|
}
|
|
/*drawing the gradient border of a bar*/
|
|
if(this._settings.border)
|
|
this._drawBarBorder(ctx,x0,y0,barWidth,minValue,radius,unit,value,color);
|
|
|
|
ctx.globalAlpha = 1;
|
|
|
|
/*sets a bar label*/
|
|
if(points[0]!=x0)
|
|
this.canvases[sIndex].renderTextAt(false, true, x0+Math.floor(barWidth/2),points[1],this._settings.label(data[i]));
|
|
else
|
|
this.canvases[sIndex].renderTextAt(true, true, x0+Math.floor(barWidth/2),points[3],this._settings.label(data[i]));
|
|
/*defines a map area for a bar*/
|
|
map.addRect(data[i].id,[x0-point0.x,points[3]-point0.y,points[2]-point0.x,points[1]-point0.y],sIndex);
|
|
//this._addMapRect(map,data[i].id,[{x:x0,y:points[3]},{x:points[2],y:points[1]}],point0,sIndex);
|
|
}
|
|
},
|
|
_correctBarParams:function(ctx,x,y,value,unit,barWidth,minValue){
|
|
var xax = this._settings.xAxis;
|
|
var axisStart = y;
|
|
if(!!xax&&this._settings.origin!="auto" && (this._settings.origin>minValue)){
|
|
y -= (this._settings.origin-minValue)*unit;
|
|
axisStart = y;
|
|
value = value-(this._settings.origin-minValue);
|
|
if(value < 0){
|
|
value *= (-1);
|
|
ctx.translate(x+barWidth,y);
|
|
ctx.rotate(Math.PI);
|
|
x = 0;
|
|
y = 0;
|
|
}
|
|
y -= 0.5;
|
|
}
|
|
|
|
return {value:value,x0:x,y0:y,start:axisStart};
|
|
},
|
|
_drawBar:function(ctx,point0,x0,y0,barWidth,minValue,radius,unit,value,color,gradient,inner_gradient){
|
|
ctx.save();
|
|
ctx.fillStyle = color;
|
|
var p = this._correctBarParams(ctx,x0,y0,value,unit,barWidth,minValue);
|
|
var points = this._setBarPoints(ctx,p.x0,p.y0,barWidth,radius,unit,p.value,(this._settings.border?1:0));
|
|
if (gradient&&!inner_gradient) ctx.lineTo(p.x0+(this._settings.border?1:0),point0.y); //fix gradient sphreading
|
|
ctx.fill();
|
|
ctx.restore();
|
|
var x1 = p.x0;
|
|
var x2 = (p.x0!=x0?x0+points[0]:points[0]);
|
|
var y1 = (p.x0!=x0?(p.start-points[1]-p.y0):p.y0);
|
|
var y2 = (p.x0!=x0?p.start-p.y0:points[1]);
|
|
|
|
return [x1,y1,x2,y2];
|
|
},
|
|
_setBorderStyles:function(ctx,color){
|
|
var hsv,rgb;
|
|
rgb = webix.color.toRgb(color);
|
|
hsv = webix.color.rgbToHsv(rgb[0],rgb[1],rgb[2]);
|
|
hsv[2] /= 1.4;
|
|
color = "rgb("+webix.color.hsvToRgb(hsv[0],hsv[1],hsv[2])+")";
|
|
ctx.strokeStyle = color;
|
|
if(ctx.globalAlpha==1)
|
|
ctx.globalAlpha = 0.9;
|
|
},
|
|
_drawBarBorder:function(ctx,x0,y0,barWidth,minValue,radius,unit,value,color){
|
|
var p;
|
|
ctx.save();
|
|
p = this._correctBarParams(ctx,x0,y0,value,unit,barWidth,minValue);
|
|
this._setBorderStyles(ctx,color);
|
|
this._setBarPoints(ctx,p.x0,p.y0,barWidth,radius,unit,p.value,ctx.lineWidth/2,1);
|
|
ctx.stroke();
|
|
/*ctx.fillStyle = color;
|
|
this._setBarPoints(ctx,p.x0,p.y0,barWidth,radius,unit,p.value,0);
|
|
ctx.lineTo(p.x0,0);
|
|
ctx.fill()
|
|
|
|
|
|
ctx.fillStyle = "#000000";
|
|
ctx.globalAlpha = 0.37;
|
|
|
|
this._setBarPoints(ctx,p.x0,p.y0,barWidth,radius,unit,p.value,0);
|
|
ctx.fill()
|
|
*/
|
|
ctx.restore();
|
|
},
|
|
_drawBarGradient:function(ctx,x0,y0,barWidth,minValue,radius,unit,value,color,inner_gradient){
|
|
ctx.save();
|
|
var p = this._correctBarParams(ctx,x0,y0,value,unit,barWidth,minValue);
|
|
var gradParam = this._setBarGradient(ctx,p.x0,p.y0,p.x0+barWidth,p.y0-unit*p.value+2,inner_gradient,color,"y");
|
|
var borderOffset = this._settings.border?1:0;
|
|
ctx.fillStyle = gradParam.gradient;
|
|
this._setBarPoints(ctx,p.x0+gradParam.offset,p.y0,barWidth-gradParam.offset*2,radius,unit,p.value,gradParam.offset+borderOffset);
|
|
ctx.fill();
|
|
ctx.restore();
|
|
},
|
|
/**
|
|
* sets points for bar and returns the position of the bottom right point
|
|
* @param: ctx - canvas object
|
|
* @param: x0 - the x position of start point
|
|
* @param: y0 - the y position of start point
|
|
* @param: barWidth - bar width
|
|
* @param: radius - the rounding radius of the top
|
|
* @param: unit - the value defines the correspondence between item value and bar height
|
|
* @param: value - item value
|
|
* @param: offset - the offset from expected bar edge (necessary for drawing border)
|
|
*/
|
|
_setBarPoints:function(ctx,x0,y0,barWidth,radius,unit,value,offset,skipBottom){
|
|
/*correction for displaing small values (when rounding radius is bigger than bar height)*/
|
|
ctx.beginPath();
|
|
//y0 = 0.5;
|
|
var angle_corr = 0;
|
|
if(radius>unit*value){
|
|
var cosA = (radius-unit*value)/radius;
|
|
if(cosA<=1&&cosA>=-1)
|
|
angle_corr = -Math.acos(cosA)+Math.PI/2;
|
|
}
|
|
/*start*/
|
|
ctx.moveTo(x0+offset,y0);
|
|
/*start of left rounding*/
|
|
var y1 = y0 - Math.floor(unit*value) + radius + (radius?0:offset);
|
|
if(radius<unit*value)
|
|
ctx.lineTo(x0+offset,y1);
|
|
/*left rounding*/
|
|
var x2 = x0 + radius;
|
|
|
|
if (radius&&radius>0)
|
|
ctx.arc(x2,y1,Math.max(radius-offset,0),-Math.PI+angle_corr,-Math.PI/2,false);
|
|
/*start of right rounding*/
|
|
var x3 = x0 + barWidth - radius - offset;
|
|
var y3 = y1 - radius + (radius?offset:0);
|
|
ctx.lineTo(x3,y3);
|
|
/*right rounding*/
|
|
if (radius&&radius>0)
|
|
ctx.arc(x3+offset,y1,Math.max(radius-offset,0),-Math.PI/2,0-angle_corr,false);
|
|
/*bottom right point*/
|
|
var x5 = x0 + barWidth-offset;
|
|
ctx.lineTo(x5,y0);
|
|
/*line to the start point*/
|
|
if(!skipBottom){
|
|
ctx.lineTo(x0+offset,y0);
|
|
}
|
|
// ctx.lineTo(x0,0); //IE fix!
|
|
return [x5,y3];
|
|
}
|
|
});
|
|
webix.extend(webix.ui.chart, {
|
|
/**
|
|
* renders a graphic
|
|
* @param: ctx - canvas object
|
|
* @param: data - object those need to be displayed
|
|
* @param: width - the width of the container
|
|
* @param: height - the height of the container
|
|
* @param: sIndex - index of drawing chart
|
|
*/
|
|
$render_line:function(ctx, data, point0, point1, sIndex, map){
|
|
var config,i,items,params,x0,x1,x2,y1,y2,y0,res1,res2;
|
|
params = this._calculateLineParams(ctx,data,point0,point1,sIndex);
|
|
config = this._settings;
|
|
if (data.length) {
|
|
x0 = (config.offset?point0.x+params.cellWidth*0.5:point0.x);
|
|
//finds items with data (excludes scale units)
|
|
items= [];
|
|
for(i=0; i < data.length;i++){
|
|
res2 = this._getPointY(data[i],point0,point1,params);
|
|
if(res2){
|
|
x2 = ((!i)?x0:params.cellWidth*i - 0.5 + x0);
|
|
y2 = (typeof res2 == "object"?res2.y0:res2);
|
|
if(i && this._settings.fixOverflow){
|
|
res1 = this._getPointY(data[i-1],point0,point1,params);
|
|
if(res1.out && res1.out == res2.out){
|
|
continue;
|
|
}
|
|
x1 = params.cellWidth*(i-1) - 0.5 + x0;
|
|
y1 = (typeof res1 == "object"?res1.y0:res1);
|
|
|
|
if(res1.out){
|
|
y0 = (res1.out == "min"?point1.y:point0.y);
|
|
items.push({x:this._calcOverflowX(x1,x2,y1,y2,y0),y:y0});
|
|
}
|
|
if(res2.out){
|
|
y0 = (res2.out == "min"?point1.y:point0.y);
|
|
items.push({x:this._calcOverflowX(x1,x2,y1,y2,y0),y:y0});
|
|
}
|
|
|
|
}
|
|
if(!res2.out)
|
|
items.push({x:x2, y: res2, index: i});
|
|
}
|
|
}
|
|
|
|
this._mapStart = point0;
|
|
for(i = 1; i <= items.length; i++){
|
|
//line start position
|
|
x1 = items[i-1].x;
|
|
y1 = items[i-1].y;
|
|
if(i<items.length){
|
|
//line end position
|
|
x2 = items[i].x;
|
|
y2 = items[i].y;
|
|
//line
|
|
this._drawLine(ctx,x1,y1,x2,y2,config.line.color.call(this,data[i-1]),config.line.width);
|
|
//line shadow
|
|
if(config.line&&config.line.shadow){
|
|
ctx.globalAlpha = 0.3;
|
|
this._drawLine(ctx,x1+2,y1+config.line.width+8,x2+2,y2+config.line.width+8,"#eeeeee",config.line.width+3);
|
|
ctx.globalAlpha = 1;
|
|
}
|
|
}
|
|
//item
|
|
if(typeof items[i-1].index != "undefined")
|
|
this._drawItem(ctx,x1,y1,data[items[i-1].index],config.label(data[items[i-1].index]), sIndex, map, point0);
|
|
}
|
|
|
|
}
|
|
},
|
|
_calcOverflowX: function(x1,x2,y1,y2,y){
|
|
return x1 + ( y - y1 )*( x2 - x1 )/( y2 - y1 );
|
|
},
|
|
/**
|
|
* draws an item and its label
|
|
* @param: ctx - canvas object
|
|
* @param: x0 - the x position of a circle
|
|
* @param: y0 - the y position of a circle
|
|
* @param: obj - data object
|
|
* @param: label - (boolean) defines wherether label needs being drawn
|
|
*/
|
|
_drawItem:function(ctx,x0,y0,obj,label,sIndex,map){
|
|
var config = this._settings.item;
|
|
|
|
var R = parseInt(config.radius.call(this,obj),10)||0;
|
|
var mapStart = this._mapStart;
|
|
if(R){
|
|
ctx.save();
|
|
if(config.shadow){
|
|
ctx.lineWidth = 1;
|
|
ctx.strokeStyle = "#bdbdbd";
|
|
ctx.fillStyle = "#bdbdbd";
|
|
var alphas = [0.1,0.2,0.3];
|
|
for(var i=(alphas.length-1);i>=0;i--){
|
|
ctx.globalAlpha = alphas[i];
|
|
ctx.strokeStyle = "#d0d0d0";
|
|
ctx.beginPath();
|
|
this._strokeChartItem(ctx,x0,y0+2*R/3,R+i+1,config.type);
|
|
ctx.stroke();
|
|
}
|
|
ctx.beginPath();
|
|
ctx.globalAlpha = 0.3;
|
|
ctx.fillStyle = "#bdbdbd";
|
|
this._strokeChartItem(ctx,x0,y0+2*R/3,R+1,config.type);
|
|
ctx.fill();
|
|
}
|
|
ctx.restore();
|
|
ctx.lineWidth = config.borderWidth;
|
|
ctx.fillStyle = config.color.call(this,obj);
|
|
ctx.strokeStyle = config.borderColor.call(this,obj);
|
|
ctx.globalAlpha = config.alpha.call(this,obj);
|
|
ctx.beginPath();
|
|
this._strokeChartItem(ctx,x0,y0,R+1,config.type);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.globalAlpha = 1;
|
|
}
|
|
/*item label*/
|
|
if(label){
|
|
this.canvases[sIndex].renderTextAt(false, true, x0,y0-R-this._settings.labelOffset,this._settings.label.call(this,obj));
|
|
}
|
|
if(map){
|
|
var areaPos = (this._settings.eventRadius||R+1);
|
|
//this._addMapRect(map,obj.id,[{x:x0-areaPos,y:y0-areaPos},{x0+areaPos,y:y0+areaPos}],point0,sIndex);
|
|
map.addRect(obj.id,[x0-areaPos-mapStart.x,y0-areaPos-mapStart.y,x0+areaPos-mapStart.x,y0+areaPos-mapStart.y],sIndex);
|
|
}
|
|
|
|
},
|
|
_strokeChartItem:function(ctx,x0,y0,R,type){
|
|
var p=[];
|
|
if(type && (type=="square" || type=="s")){
|
|
R *= Math.sqrt(2)/2;
|
|
p = [
|
|
[x0-R-ctx.lineWidth/2,y0-R],
|
|
[x0+R,y0-R],
|
|
[x0+R,y0+R],
|
|
[x0-R,y0+R],
|
|
[x0-R,y0-R]
|
|
];
|
|
}
|
|
else if(type && (type=="diamond" || type=="d")){
|
|
var corr = (ctx.lineWidth>1?ctx.lineWidth*Math.sqrt(2)/4:0);
|
|
p = [
|
|
[x0,y0-R],
|
|
[x0+R,y0],
|
|
[x0,y0+R],
|
|
[x0-R,y0],
|
|
[x0+corr,y0-R-corr]
|
|
];
|
|
}
|
|
else if(type && (type=="triangle" || type=="t")){
|
|
p = [
|
|
[x0,y0-R],
|
|
[x0+Math.sqrt(3)*R/2,y0+R/2],
|
|
[x0-Math.sqrt(3)*R/2,y0+R/2],
|
|
[x0,y0-R]
|
|
];
|
|
}
|
|
else
|
|
p = [
|
|
[x0,y0,R,0,Math.PI*2,true]
|
|
];
|
|
this._path(ctx,p);
|
|
},
|
|
/**
|
|
* gets the vertical position of the item
|
|
* @param: data - data object
|
|
* @param: y0 - the y position of chart start
|
|
* @param: y1 - the y position of chart end
|
|
* @param: params - the object with elements: minValue, maxValue, unit, valueFactor (the value multiple of 10)
|
|
*/
|
|
_getPointY: function(data,point0,point1,params){
|
|
var minValue = params.minValue;
|
|
var maxValue = params.maxValue;
|
|
var unit = params.unit;
|
|
var valueFactor = params.valueFactor;
|
|
/*the real value of an object*/
|
|
var value = this._settings.value(data);
|
|
if(this._logScaleCalc){
|
|
value = this._log10(value);
|
|
}
|
|
/*a relative value*/
|
|
var v = (parseFloat(value||0) - minValue)*valueFactor;
|
|
if(!this._settings.yAxis)
|
|
v += params.startValue/unit;
|
|
/*a vertical coordinate*/
|
|
var y = point1.y - unit*v;
|
|
/*the limit of the max and min values*/
|
|
if(this._settings.fixOverflow && ( this._settings.type == "line" || this._settings.type == "area")){
|
|
if(value > maxValue)
|
|
y = {y: point0.y, y0: y, out: "max"};
|
|
else if(v<0 || value < minValue)
|
|
y = {y: point1.y, y0: y, out: "min"};
|
|
}
|
|
else{
|
|
if(value > maxValue)
|
|
y = point0.y;
|
|
if(v<0 || value < minValue)
|
|
y = point1.y;
|
|
}
|
|
return y;
|
|
},
|
|
_calculateLineParams: function(ctx,data,point0,point1,sIndex){
|
|
var params = {};
|
|
|
|
/*maxValue - minValue*/
|
|
var relValue;
|
|
|
|
/*available height*/
|
|
params.totalHeight = point1.y-point0.y;
|
|
|
|
/*a space available for a single item*/
|
|
//params.cellWidth = Math.round((point1.x-point0.x)/((!this._settings.offset&&this._settings.yAxis)?(data.length-1):data.length));
|
|
params.cellWidth =(point1.x-point0.x)/((!this._settings.offset)?(data.length-1):data.length);
|
|
/*scales*/
|
|
var yax = !!this._settings.yAxis;
|
|
|
|
var limits = (this._settings.type.indexOf("stacked")!=-1?this._getStackedLimits(data):this._getLimits());
|
|
params.maxValue = limits.max;
|
|
params.minValue = limits.min;
|
|
|
|
/*draws x and y scales*/
|
|
if(!sIndex)
|
|
this._drawScales(data, point0, point1,params.minValue,params.maxValue,params.cellWidth);
|
|
|
|
/*necessary for automatic scale*/
|
|
if(yax){
|
|
params.maxValue = parseFloat(this._settings.yAxis.end);
|
|
params.minValue = parseFloat(this._settings.yAxis.start);
|
|
}
|
|
|
|
/*unit calculation (y_position = value*unit)*/
|
|
var relativeValues = this._getRelativeValue(params.minValue,params.maxValue);
|
|
relValue = relativeValues[0];
|
|
params.valueFactor = relativeValues[1];
|
|
params.unit = (relValue?params.totalHeight/relValue:10);
|
|
|
|
params.startValue = 0;
|
|
if(!yax){
|
|
/*defines start value for better representation of small values*/
|
|
params.startValue = 10;
|
|
if(params.unit!=params.totalHeight)
|
|
params.unit = (relValue?(params.totalHeight - params.startValue)/relValue:10);
|
|
}
|
|
return params;
|
|
}
|
|
});
|
|
|
|
|
|
webix.extend(webix.ui.chart, {
|
|
/**
|
|
* renders a bar chart
|
|
* @param: ctx - canvas object
|
|
* @param: data - object those need to be displayed
|
|
* @param: x - the width of the container
|
|
* @param: y - the height of the container
|
|
* @param: sIndex - index of drawing chart
|
|
*/
|
|
$render_barH:function(ctx, data, point0, point1, sIndex, map){
|
|
var barOffset, barWidth, cellWidth, color, gradient, i, limits, maxValue, minValue,
|
|
innerGradient, valueFactor, relValue, radius, relativeValues,
|
|
startValue, totalWidth,value, unit, x0, y0, xax;
|
|
|
|
/*an available width for one bar*/
|
|
cellWidth = (point1.y-point0.y)/data.length;
|
|
|
|
limits = this._getLimits("h");
|
|
|
|
maxValue = limits.max;
|
|
minValue = limits.min;
|
|
|
|
totalWidth = point1.x-point0.x;
|
|
|
|
xax = !!this._settings.xAxis;
|
|
|
|
/*draws x and y scales*/
|
|
if(!sIndex )
|
|
this._drawHScales(ctx,data,point0, point1,minValue,maxValue,cellWidth);
|
|
|
|
/*necessary for automatic scale*/
|
|
if(xax ){
|
|
maxValue = parseFloat(this._settings.xAxis.end);
|
|
minValue = parseFloat(this._settings.xAxis.start);
|
|
}
|
|
|
|
/*unit calculation (bar_height = value*unit)*/
|
|
relativeValues = this._getRelativeValue(minValue,maxValue);
|
|
relValue = relativeValues[0];
|
|
valueFactor = relativeValues[1];
|
|
|
|
unit = (relValue?totalWidth/relValue:10);
|
|
if(!xax){
|
|
/*defines start value for better representation of small values*/
|
|
startValue = 10;
|
|
unit = (relValue?(totalWidth-startValue)/relValue:10);
|
|
}
|
|
|
|
|
|
/*a real bar width */
|
|
barWidth = parseInt(this._settings.barWidth,10);
|
|
if((barWidth*this._series.length+4)>cellWidth) barWidth = cellWidth/this._series.length-4;
|
|
/*the half of distance between bars*/
|
|
barOffset = Math.floor((cellWidth - barWidth*this._series.length)/2);
|
|
/*the radius of rounding in the top part of each bar*/
|
|
radius = (typeof this._settings.radius!="undefined"?parseInt(this._settings.radius,10):Math.round(barWidth/5));
|
|
|
|
innerGradient = false;
|
|
gradient = this._settings.gradient;
|
|
|
|
if (gradient&&typeof(gradient) != "function"){
|
|
innerGradient = gradient;
|
|
gradient = false;
|
|
} else if (gradient){
|
|
gradient = ctx.createLinearGradient(point0.x,point0.y,point1.x,point0.y);
|
|
this._settings.gradient(gradient);
|
|
}
|
|
/*draws a black line if the horizontal scale isn't defined*/
|
|
if(!xax){
|
|
this._drawLine(ctx,point0.x-0.5,point0.y,point0.x-0.5,point1.y,"#000000",1); //hardcoded color!
|
|
}
|
|
|
|
|
|
|
|
for(i=0; i < data.length;i ++){
|
|
|
|
|
|
value = parseFloat(this._settings.value(data[i]||0));
|
|
if(this._logScaleCalc)
|
|
value = this._log10(value);
|
|
|
|
if(value>maxValue) value = maxValue;
|
|
value -= minValue;
|
|
value *= valueFactor;
|
|
|
|
/*start point (bottom left)*/
|
|
x0 = point0.x;
|
|
y0 = point0.y+ barOffset + i*cellWidth+(barWidth+1)*sIndex;
|
|
|
|
if((value<0&&this._settings.origin=="auto")||(this._settings.xAxis&&value===0&&!(this._settings.origin!="auto"&&this._settings.origin>minValue))){
|
|
this.canvases[sIndex].renderTextAt("middle", "right", x0+10,y0+barWidth/2+barOffset,this._settings.label(data[i]));
|
|
continue;
|
|
}
|
|
if(value<0&&this._settings.origin!="auto"&&this._settings.origin>minValue){
|
|
value = 0;
|
|
}
|
|
|
|
/*takes start value into consideration*/
|
|
if(!xax) value += startValue/unit;
|
|
color = gradient||this._settings.color.call(this,data[i]);
|
|
|
|
/*drawing the gradient border of a bar*/
|
|
if(this._settings.border){
|
|
this._drawBarHBorder(ctx,x0,y0,barWidth,minValue,radius,unit,value,color);
|
|
}
|
|
|
|
/*drawing bar body*/
|
|
ctx.globalAlpha = this._settings.alpha.call(this,data[i]);
|
|
var points = this._drawBarH(ctx,point1,x0,y0,barWidth,minValue,radius,unit,value,color,gradient,innerGradient);
|
|
if (innerGradient){
|
|
this._drawBarHGradient(ctx,x0,y0,barWidth,minValue,radius,unit,value,color,innerGradient);
|
|
|
|
}
|
|
ctx.globalAlpha = 1;
|
|
|
|
|
|
/*sets a bar label and map area*/
|
|
|
|
if(points[3]==y0){
|
|
this.canvases[sIndex].renderTextAt("middle", "left", points[0]-5,points[3]+Math.floor(barWidth/2),this._settings.label(data[i]));
|
|
map.addRect(data[i].id,[points[0]-point0.x,points[3]-point0.y,points[2]-point0.x,points[3]+barWidth-point0.y],sIndex);
|
|
|
|
}else{
|
|
this.canvases[sIndex].renderTextAt("middle", false, points[2]+5,points[1]+Math.floor(barWidth/2),this._settings.label(data[i]));
|
|
map.addRect(data[i].id,[points[0]-point0.x,y0-point0.y,points[2]-point0.x,points[3]-point0.y],sIndex);
|
|
}
|
|
|
|
}
|
|
},
|
|
/**
|
|
* sets points for bar and returns the position of the bottom right point
|
|
* @param: ctx - canvas object
|
|
* @param: x0 - the x position of start point
|
|
* @param: y0 - the y position of start point
|
|
* @param: barWidth - bar width
|
|
* @param: radius - the rounding radius of the top
|
|
* @param: unit - the value defines the correspondence between item value and bar height
|
|
* @param: value - item value
|
|
* @param: offset - the offset from expected bar edge (necessary for drawing border)
|
|
*/
|
|
_setBarHPoints:function(ctx,x0,y0,barWidth,radius,unit,value,offset,skipLeft){
|
|
/*correction for displaing small values (when rounding radius is bigger than bar height)*/
|
|
var angle_corr = 0;
|
|
|
|
if(radius>unit*value){
|
|
var sinA = (radius-unit*value)/radius;
|
|
angle_corr = -Math.asin(sinA)+Math.PI/2;
|
|
}
|
|
/*start*/
|
|
ctx.moveTo(x0,y0+offset);
|
|
/*start of left rounding*/
|
|
var x1 = x0 + unit*value - radius - (radius?0:offset);
|
|
x1 = Math.max(x0,x1);
|
|
if(radius<unit*value)
|
|
ctx.lineTo(x1,y0+offset);
|
|
/*left rounding*/
|
|
var y2 = y0 + radius;
|
|
if (radius&&radius>0)
|
|
ctx.arc(x1,y2,radius-offset,-Math.PI/2+angle_corr,0,false);
|
|
/*start of right rounding*/
|
|
var y3 = y0 + barWidth - radius - (radius?0:offset);
|
|
var x3 = x1 + radius - (radius?offset:0);
|
|
ctx.lineTo(x3,y3);
|
|
/*right rounding*/
|
|
if (radius&&radius>0)
|
|
ctx.arc(x1,y3,radius-offset,0,Math.PI/2-angle_corr,false);
|
|
/*bottom right point*/
|
|
var y5 = y0 + barWidth-offset;
|
|
ctx.lineTo(x0,y5);
|
|
/*line to the start point*/
|
|
if(!skipLeft){
|
|
ctx.lineTo(x0,y0+offset);
|
|
}
|
|
// ctx.lineTo(x0,0); //IE fix!
|
|
return [x3,y5];
|
|
},
|
|
_drawHScales:function(ctx,data,point0,point1,start,end,cellWidth){
|
|
var x = 0;
|
|
if(this._settings.xAxis){
|
|
if(!this.canvases["x"])
|
|
this.canvases["x"] = this._createCanvas("axis_x");
|
|
x = this._drawHXAxis(this.canvases["x"].getCanvas(),data,point0,point1,start,end);
|
|
}
|
|
if (this._settings.yAxis){
|
|
if(!this.canvases["y"])
|
|
this.canvases["y"] = this._createCanvas("axis_y");
|
|
this._drawHYAxis(this.canvases["y"].getCanvas(),data,point0,point1,cellWidth,x);
|
|
}
|
|
},
|
|
_drawHYAxis:function(ctx,data,point0,point1,cellWidth,yAxisX){
|
|
if (!this._settings.yAxis) return;
|
|
var unitPos;
|
|
var x0 = parseInt((yAxisX?yAxisX:point0.x),10)-0.5;
|
|
var y0 = point1.y+0.5;
|
|
var y1 = point0.y;
|
|
this._drawLine(ctx,x0,y0,x0,y1,this._settings.yAxis.color,1);
|
|
|
|
|
|
|
|
for(var i=0; i < data.length;i ++){
|
|
|
|
/*scale labels*/
|
|
var right = ((this._settings.origin!="auto")&&(this._settings.type=="barH")&&(parseFloat(this._settings.value(data[i]))<this._settings.origin));
|
|
unitPos = y1+cellWidth/2+i*cellWidth;
|
|
this.canvases["y"].renderTextAt("middle",(right?false:"left"),(right?x0+5:x0-5),unitPos,
|
|
this._settings.yAxis.template(data[i]),
|
|
"webix_axis_item_y",(right?0:x0-10)
|
|
);
|
|
if(this._settings.yAxis.lines.call(this,data[i]))
|
|
this._drawLine(ctx,point0.x,unitPos,point1.x,unitPos,this._settings.yAxis.lineColor.call(this,data[i]),1);
|
|
}
|
|
|
|
if(this._settings.yAxis.lines.call(this,{}))
|
|
this._drawLine(ctx,point0.x+0.5,y1+0.5,point1.x,y1+0.5,this._settings.yAxis.lineColor.call(this,{}),1);
|
|
this._setYAxisTitle(point0,point1);
|
|
},
|
|
_drawHXAxis:function(ctx,data,point0,point1,start,end){
|
|
var step;
|
|
var scaleParam= {};
|
|
var axis = this._settings.xAxis;
|
|
if (!axis) return;
|
|
|
|
var y0 = point1.y+0.5;
|
|
var x0 = point0.x-0.5;
|
|
var x1 = point1.x-0.5;
|
|
var yAxisStart = point0.x;
|
|
this._drawLine(ctx,x0,y0,x1,y0,axis.color,1);
|
|
|
|
if(axis.step)
|
|
step = parseFloat(axis.step);
|
|
|
|
if(typeof this._configXAxis.step =="undefined"||typeof this._configXAxis.start=="undefined"||typeof this._configXAxis.end =="undefined"){
|
|
scaleParam = this._calculateScale(start,end);
|
|
start = scaleParam.start;
|
|
end = scaleParam.end;
|
|
step = scaleParam.step;
|
|
this._settings.xAxis.end = end;
|
|
this._settings.xAxis.start = start;
|
|
this._settings.xAxis.step = step;
|
|
}
|
|
|
|
if(step===0) return;
|
|
var stepHeight = (x1-x0)*step/(end-start);
|
|
var c = 0;
|
|
for(var i = start; i<=end; i += step){
|
|
var value = this._logScaleCalc?Math.pow(10,i):i;
|
|
if(scaleParam.fixNum) value = parseFloat(value).toFixed(scaleParam.fixNum);
|
|
var xi = Math.floor(x0+c*stepHeight)+ 0.5;/*canvas line fix*/
|
|
|
|
if(!(i==start&&this._settings.origin=="auto") &&axis.lines.call(this,i))
|
|
this._drawLine(ctx,xi,y0,xi,point0.y,this._settings.xAxis.lineColor.call(this,i),1);
|
|
if(i == this._settings.origin) yAxisStart = xi+1;
|
|
/*correction for JS float calculation*/
|
|
if(step<1 && !this._logScaleCalc){
|
|
var power = Math.min(Math.floor(this._log10(step)),(start<=0?0:Math.floor(this._log10(start))));
|
|
var corr = Math.pow(10,-power);
|
|
value = Math.round(value*corr)/corr;
|
|
i = value;
|
|
}
|
|
this.canvases["x"].renderTextAt(false, true,xi,y0+2,axis.template(value.toString()),"webix_axis_item_x");
|
|
c++;
|
|
}
|
|
this.canvases["x"].renderTextAt(true, false, x0,point1.y+this._settings.padding.bottom-3,
|
|
this._settings.xAxis.title,
|
|
"webix_axis_title_x",
|
|
point1.x - point0.x
|
|
);
|
|
/*the right border in lines in scale are enabled*/
|
|
if (!axis.lines.call(this,{})){
|
|
this._drawLine(ctx,x0,point0.y-0.5,x1,point0.y-0.5,this._settings.xAxis.color,0.2);
|
|
}
|
|
return yAxisStart;
|
|
},
|
|
_correctBarHParams:function(ctx,x,y,value,unit,barWidth,minValue){
|
|
var yax = this._settings.yAxis;
|
|
var axisStart = x;
|
|
if(!!yax&&this._settings.origin!="auto" && (this._settings.origin>minValue)){
|
|
x += (this._settings.origin-minValue)*unit;
|
|
axisStart = x;
|
|
value = value-(this._settings.origin-minValue);
|
|
if(value < 0){
|
|
value *= (-1);
|
|
ctx.translate(x,y+barWidth);
|
|
ctx.rotate(Math.PI);
|
|
x = 0.5;
|
|
y = 0;
|
|
}
|
|
x += 0.5;
|
|
}
|
|
|
|
return {value:value,x0:x,y0:y,start:axisStart};
|
|
},
|
|
_drawBarH:function(ctx,point1,x0,y0,barWidth,minValue,radius,unit,value,color,gradient,inner_gradient){
|
|
ctx.save();
|
|
var p = this._correctBarHParams(ctx,x0,y0,value,unit,barWidth,minValue);
|
|
ctx.fillStyle = color;
|
|
ctx.beginPath();
|
|
var points = this._setBarHPoints(ctx,p.x0,p.y0,barWidth,radius,unit,p.value,(this._settings.border?1:0));
|
|
if (gradient&&!inner_gradient) ctx.lineTo(point1.x,p.y0+(this._settings.border?1:0)); //fix gradient sphreading
|
|
ctx.fill();
|
|
ctx.restore();
|
|
var y1 = p.y0;
|
|
var y2 = (p.y0!=y0?y0:points[1]);
|
|
var x1 = (p.y0!=y0?(p.start-points[0]):p.start);
|
|
var x2 = (p.y0!=y0?p.start:points[0]);
|
|
|
|
return [x1,y1,x2,y2];
|
|
},
|
|
_drawBarHBorder:function(ctx,x0,y0,barWidth,minValue,radius,unit,value,color){
|
|
ctx.save();
|
|
var p = this._correctBarHParams(ctx,x0,y0,value,unit,barWidth,minValue);
|
|
|
|
ctx.beginPath();
|
|
this._setBorderStyles(ctx,color);
|
|
ctx.globalAlpha =0.9;
|
|
this._setBarHPoints(ctx,p.x0,p.y0,barWidth,radius,unit,p.value,ctx.lineWidth/2,1);
|
|
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
},
|
|
_drawBarHGradient:function(ctx,x0,y0,barWidth,minValue,radius,unit,value,color,inner_gradient){
|
|
ctx.save();
|
|
//y0 -= (webix.env.isIE?0:0.5);
|
|
var p = this._correctBarHParams(ctx,x0,y0,value,unit,barWidth,minValue);
|
|
var gradParam = this._setBarGradient(ctx,p.x0,p.y0+barWidth,p.x0+unit*p.value,p.y0,inner_gradient,color,"x");
|
|
ctx.fillStyle = gradParam.gradient;
|
|
ctx.beginPath();
|
|
this._setBarHPoints(ctx,p.x0,p.y0+gradParam.offset,barWidth-gradParam.offset*2,radius,unit,p.value,gradParam.offset);
|
|
ctx.fill();
|
|
ctx.globalAlpha = 1;
|
|
ctx.restore();
|
|
}
|
|
});
|
|
|
|
webix.extend(webix.ui.chart, {
|
|
/**
|
|
* renders a bar chart
|
|
* @param: ctx - canvas object
|
|
* @param: data - object those need to be displayed
|
|
* @param: x - the width of the container
|
|
* @param: y - the height of the container
|
|
* @param: sIndex - index of drawing chart
|
|
*/
|
|
$render_stackedBar:function(ctx, data, point0, point1, sIndex, map){
|
|
var maxValue,minValue, xAxisY, x0, y0;
|
|
/*necessary if maxValue - minValue < 0*/
|
|
var valueFactor;
|
|
/*maxValue - minValue*/
|
|
var relValue;
|
|
var config = this._settings;
|
|
var total_height = point1.y-point0.y;
|
|
|
|
var yax = !!config.yAxis;
|
|
var xax = !!config.xAxis;
|
|
|
|
var limits = this._getStackedLimits(data);
|
|
|
|
var origin = (config.origin === 0);
|
|
|
|
maxValue = limits.max;
|
|
minValue = limits.min;
|
|
|
|
/*an available width for one bar*/
|
|
var cellWidth = Math.floor((point1.x-point0.x)/data.length);
|
|
|
|
/*draws x and y scales*/
|
|
if(!sIndex){
|
|
xAxisY = this._drawScales(data,point0, point1,minValue,maxValue,cellWidth);
|
|
}
|
|
|
|
/*necessary for automatic scale*/
|
|
if(yax){
|
|
maxValue = parseFloat(config.yAxis.end);
|
|
minValue = parseFloat(config.yAxis.start);
|
|
}
|
|
|
|
/*unit calculation (bar_height = value*unit)*/
|
|
var relativeValues = this._getRelativeValue(minValue,maxValue);
|
|
relValue = relativeValues[0];
|
|
valueFactor = relativeValues[1];
|
|
|
|
var unit = (relValue?total_height/relValue:10);
|
|
|
|
/*a real bar width */
|
|
var barWidth = parseInt(config.barWidth,10);
|
|
if(barWidth+4 > cellWidth) barWidth = cellWidth-4;
|
|
/*the half of distance between bars*/
|
|
var barOffset = Math.floor((cellWidth - barWidth)/2);
|
|
|
|
|
|
var inner_gradient = (config.gradient?config.gradient:false);
|
|
|
|
/*draws a black line if the horizontal scale isn't defined*/
|
|
if(!xax){
|
|
//scaleY = y-bottomPadding;
|
|
this._drawLine(ctx,point0.x,point1.y+0.5,point1.x,point1.y+0.5,"#000000",1); //hardcoded color!
|
|
}
|
|
|
|
for(var i=0; i < data.length;i ++){
|
|
var value = parseFloat(config.value(data[i]||0));
|
|
|
|
if(this._logScaleCalc)
|
|
value = this._log10(value);
|
|
|
|
/*start point (bottom left)*/
|
|
x0 = point0.x + barOffset + i*cellWidth;
|
|
|
|
|
|
var negValue = origin&&value<0;
|
|
if(!sIndex){
|
|
y0 = xAxisY-1;
|
|
data[i].$startY = y0;
|
|
if(origin){
|
|
if(negValue)
|
|
y0 = xAxisY+1;
|
|
data[i].$startYN = xAxisY+1;
|
|
}
|
|
}
|
|
else{
|
|
y0 = negValue?data[i].$startYN:data[i].$startY;
|
|
}
|
|
|
|
if(!value)
|
|
continue;
|
|
|
|
/*adjusts the first tab to the scale*/
|
|
if(!sIndex && !origin)
|
|
value -= minValue;
|
|
|
|
value *= valueFactor;
|
|
|
|
/*the max height limit*/
|
|
if(y0 < (point0.y+1)) continue;
|
|
|
|
if(config.yAxis&&value===0){
|
|
this.canvases["y"].renderTextAt(true, true, x0+Math.floor(barWidth/2),y0,this._settings.label(data[i]));
|
|
continue;
|
|
}
|
|
|
|
var color = this._settings.color.call(this,data[i]);
|
|
|
|
var firstSector = Math.abs(y0-(origin?(point1.y+minValue*unit):point1.y))<3;
|
|
|
|
/*drawing bar body*/
|
|
ctx.globalAlpha = config.alpha.call(this,data[i]);
|
|
ctx.fillStyle = ctx.strokeStyle = config.color.call(this,data[i]);
|
|
ctx.beginPath();
|
|
|
|
var y1 = y0 - unit*value + (firstSector?(negValue?-1:1):0);
|
|
|
|
var points = this._setStakedBarPoints(ctx,x0-(config.border?0.5:0),y0,barWidth+(config.border?0.5:0),y1, 0,point0.y);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
/*gradient*/
|
|
if (inner_gradient){
|
|
ctx.save();
|
|
var gradParam = this._setBarGradient(ctx,x0,y0,x0+barWidth,points[1],inner_gradient,color,"y");
|
|
ctx.fillStyle = gradParam.gradient;
|
|
ctx.beginPath();
|
|
points = this._setStakedBarPoints(ctx,x0+gradParam.offset,y0,barWidth-gradParam.offset*2,y1,(config.border?1:0),point0.y);
|
|
ctx.fill();
|
|
ctx.restore();
|
|
}
|
|
/*drawing the gradient border of a bar*/
|
|
if(config.border){
|
|
ctx.save();
|
|
if(typeof config.border == "string")
|
|
ctx.strokeStyle = config.border;
|
|
else
|
|
this._setBorderStyles(ctx,color);
|
|
ctx.beginPath();
|
|
|
|
this._setStakedBarPoints(ctx,x0-0.5,parseInt(y0,10)+0.5,barWidth+1,parseInt(y1,10)+0.5,0,point0.y, firstSector);
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
}
|
|
ctx.globalAlpha = 1;
|
|
|
|
/*sets a bar label*/
|
|
this.canvases[sIndex].renderTextAt(false, true, x0+Math.floor(barWidth/2),(points[1]+(y0-points[1])/2)-7,this._settings.label(data[i]));
|
|
/*defines a map area for a bar*/
|
|
map.addRect(data[i].id,[x0-point0.x,points[1]-point0.y,points[0]-point0.x,data[i][negValue?"$startYN":"$startY"]-point0.y],sIndex);
|
|
|
|
/*the start position for the next series*/
|
|
|
|
data[i][negValue?"$startYN":"$startY"] = points[1];
|
|
|
|
}
|
|
},
|
|
/**
|
|
* sets points for bar and returns the position of the bottom right point
|
|
* @param: ctx - canvas object
|
|
* @param: x0 - the x position of start point
|
|
* @param: y0 - the y position of start point
|
|
* @param: barWidth - bar width
|
|
* @param: radius - the rounding radius of the top
|
|
* @param: unit - the value defines the correspondence between item value and bar height
|
|
* @param: value - item value
|
|
* @param: offset - the offset from expected bar edge (necessary for drawing border)
|
|
* @param: minY - the minimum y position for the bars ()
|
|
*/
|
|
_setStakedBarPoints:function(ctx,x0,y0,barWidth,y1,offset,minY,skipBottom){
|
|
/*start*/
|
|
ctx.moveTo(x0,y0);
|
|
/*maximum height limit*/
|
|
|
|
if(y1<minY)
|
|
y1 = minY;
|
|
ctx.lineTo(x0,y1);
|
|
var x3 = x0 + barWidth;
|
|
var y3 = y1;
|
|
ctx.lineTo(x3,y3);
|
|
/*right rounding*/
|
|
/*bottom right point*/
|
|
var x5 = x0 + barWidth;
|
|
ctx.lineTo(x5,y0);
|
|
/*line to the start point*/
|
|
if(!skipBottom){
|
|
ctx.lineTo(x0,y0);
|
|
}
|
|
// ctx.lineTo(x0,0); //IE fix!
|
|
return [x5,y3];
|
|
}
|
|
});
|
|
|
|
webix.extend(webix.ui.chart, {
|
|
/**
|
|
* renders a bar chart
|
|
* @param: ctx - canvas object
|
|
* @param: data - object those need to be displayed
|
|
* @param: x - the width of the container
|
|
* @param: y - the height of the container
|
|
* @param: sIndex - index of drawing chart
|
|
* @param: map - map object
|
|
*/
|
|
$render_stackedBarH:function(ctx, data, point0, point1, sIndex, map){
|
|
var maxValue,minValue;
|
|
/*necessary if maxValue - minValue < 0*/
|
|
var valueFactor;
|
|
/*maxValue - minValue*/
|
|
var relValue;
|
|
|
|
var total_width = point1.x-point0.x;
|
|
|
|
var yax = !!this._settings.yAxis;
|
|
|
|
var limits = this._getStackedLimits(data);
|
|
maxValue = limits.max;
|
|
minValue = limits.min;
|
|
|
|
/*an available width for one bar*/
|
|
var cellWidth = Math.floor((point1.y-point0.y)/data.length);
|
|
|
|
/*draws x and y scales*/
|
|
if(!sIndex)
|
|
this._drawHScales(ctx,data,point0, point1,minValue,maxValue,cellWidth);
|
|
|
|
/*necessary for automatic scale*/
|
|
if(yax){
|
|
maxValue = parseFloat(this._settings.xAxis.end);
|
|
minValue = parseFloat(this._settings.xAxis.start);
|
|
}
|
|
|
|
/*unit calculation (bar_height = value*unit)*/
|
|
var relativeValues = this._getRelativeValue(minValue,maxValue);
|
|
relValue = relativeValues[0];
|
|
valueFactor = relativeValues[1];
|
|
|
|
var unit = (relValue?total_width/relValue:10);
|
|
var startValue = 0;
|
|
if(!yax){
|
|
/*defines start value for better representation of small values*/
|
|
startValue = 10;
|
|
unit = (relValue?(total_width-startValue)/relValue:10);
|
|
}
|
|
|
|
/*a real bar width */
|
|
var barWidth = parseInt(this._settings.barWidth,10);
|
|
if((barWidth+4)>cellWidth) barWidth = cellWidth-4;
|
|
/*the half of distance between bars*/
|
|
var barOffset = (cellWidth - barWidth)/2;
|
|
/*the radius of rounding in the top part of each bar*/
|
|
var radius = 0;
|
|
|
|
var inner_gradient = false;
|
|
var gradient = this._settings.gradient;
|
|
if (gradient){
|
|
inner_gradient = true;
|
|
}
|
|
/*draws a black line if the horizontal scale isn't defined*/
|
|
if(!yax){
|
|
this._drawLine(ctx,point0.x-0.5,point0.y,point0.x-0.5,point1.y,"#000000",1); //hardcoded color!
|
|
}
|
|
|
|
var seriesNumber = 0;
|
|
var seriesIndex = 0;
|
|
for(i=0; i<this._series.length; i++ ){
|
|
if(i == sIndex){
|
|
seriesIndex = seriesNumber;
|
|
}
|
|
if(this._series[i].type == "stackedBarH")
|
|
seriesNumber++;
|
|
}
|
|
|
|
for(var i=0; i < data.length;i ++){
|
|
|
|
if(!seriesIndex)
|
|
data[i].$startX = point0.x;
|
|
|
|
var value = parseFloat(this._settings.value(data[i]||0));
|
|
if(value>maxValue) value = maxValue;
|
|
value -= minValue;
|
|
value *= valueFactor;
|
|
|
|
/*start point (bottom left)*/
|
|
var x0 = point0.x;
|
|
var y0 = point0.y+ barOffset + i*cellWidth;
|
|
|
|
if(!seriesIndex)
|
|
data[i].$startX = x0;
|
|
else
|
|
x0 = data[i].$startX;
|
|
|
|
if(value<0||(this._settings.yAxis&&value===0)){
|
|
this.canvases["y"].renderTextAt("middle", true, x0+10,y0+barWidth/2,this._settings.label(data[i]));
|
|
continue;
|
|
}
|
|
|
|
/*takes start value into consideration*/
|
|
if(!yax) value += startValue/unit;
|
|
var color = this._settings.color.call(this,data[i]);
|
|
|
|
|
|
/*drawing bar body*/
|
|
ctx.globalAlpha = this._settings.alpha.call(this,data[i]);
|
|
ctx.fillStyle = this._settings.color.call(this,data[i]);
|
|
ctx.beginPath();
|
|
var points = this._setBarHPoints(ctx,x0,y0,barWidth,radius,unit,value,0);
|
|
if (gradient&&!inner_gradient) ctx.lineTo(point0.x+total_width,y0+(this._settings.border?1:0)); //fix gradient sphreading
|
|
ctx.fill();
|
|
|
|
if (inner_gradient){
|
|
var gradParam = this._setBarGradient(ctx,x0,y0+barWidth,x0,y0,inner_gradient,color,"x");
|
|
ctx.fillStyle = gradParam.gradient;
|
|
ctx.beginPath();
|
|
points = this._setBarHPoints(ctx,x0,y0, barWidth,radius,unit,value,0);
|
|
ctx.fill();
|
|
}
|
|
/*drawing the gradient border of a bar*/
|
|
if(this._settings.border){
|
|
this._drawBarHBorder(ctx,x0,y0,barWidth,minValue,radius,unit,value,color);
|
|
}
|
|
|
|
ctx.globalAlpha = 1;
|
|
|
|
/*sets a bar label*/
|
|
this.canvases[sIndex].renderTextAt("middle",true,data[i].$startX+(points[0]-data[i].$startX)/2-1, y0+(points[1]-y0)/2, this._settings.label(data[i]));
|
|
/*defines a map area for a bar*/
|
|
map.addRect(data[i].id,[data[i].$startX-point0.x,y0-point0.y,points[0]-point0.x,points[1]-point0.y],sIndex);
|
|
/*the start position for the next series*/
|
|
data[i].$startX = points[0];
|
|
}
|
|
}
|
|
});
|
|
webix.extend(webix.ui.chart, {
|
|
/**
|
|
* renders a spline chart
|
|
* @param: ctx - canvas object
|
|
* @param: data - object those need to be displayed
|
|
* @param: width - the width of the container
|
|
* @param: height - the height of the container
|
|
* @param: sIndex - index of drawing chart
|
|
*/
|
|
$render_spline:function(ctx, data, point0, point1, sIndex, map){
|
|
var config,i,items,j,params,sparam,x,x0,x1,x2,y,y1,y2;
|
|
params = this._calculateLineParams(ctx,data,point0,point1,sIndex);
|
|
config = this._settings;
|
|
this._mapStart = point0;
|
|
|
|
/*array of all points*/
|
|
items = [];
|
|
|
|
/*drawing all items*/
|
|
if (data.length) {
|
|
|
|
/*getting all points*/
|
|
x0 = (config.offset?point0.x+params.cellWidth*0.5:point0.x);
|
|
for(i=0; i < data.length;i ++){
|
|
y = this._getPointY(data[i],point0,point1,params);
|
|
if(y){
|
|
x = ((!i)?x0:params.cellWidth*i - 0.5 + x0);
|
|
items.push({x:x,y:y,index:i});
|
|
}
|
|
}
|
|
sparam = this._getSplineParameters(items);
|
|
|
|
for(i =0; i< items.length; i++){
|
|
x1 = items[i].x;
|
|
y1 = items[i].y;
|
|
if(i<items.length-1){
|
|
x2 = items[i+1].x;
|
|
y2 = items[i+1].y;
|
|
for(j = x1; j < x2; j++){
|
|
var sY1 = this._getSplineYPoint(j,x1,i,sparam.a,sparam.b,sparam.c,sparam.d);
|
|
if(sY1<point0.y)
|
|
sY1=point0.y;
|
|
if(sY1>point1.y)
|
|
sY1=point1.y;
|
|
var sY2 = this._getSplineYPoint(j+1,x1,i,sparam.a,sparam.b,sparam.c,sparam.d);
|
|
if(sY2<point0.y)
|
|
sY2=point0.y;
|
|
if(sY2>point1.y)
|
|
sY2=point1.y;
|
|
this._drawLine(ctx,j,sY1,j+1,sY2,config.line.color(data[i]),config.line.width);
|
|
|
|
}
|
|
this._drawLine(ctx,x2-1,this._getSplineYPoint(j,x1,i,sparam.a,sparam.b,sparam.c,sparam.d),x2,y2,config.line.color(data[i]),config.line.width);
|
|
}
|
|
this._drawItem(ctx,x1,y1,data[items[i].index],config.label(data[items[i].index]), sIndex, map);
|
|
}
|
|
}
|
|
},
|
|
/*gets spline parameter*/
|
|
_getSplineParameters:function(points){
|
|
var a ,b, c, d, i, s, u, v,
|
|
h = [],
|
|
m = [],
|
|
n = points.length;
|
|
|
|
for(i =0; i<n-1;i++){
|
|
h[i] = points[i+1].x - points[i].x;
|
|
m[i] = (points[i+1].y - points[i].y)/h[i];
|
|
}
|
|
u = []; v = [];
|
|
u[0] = 0;
|
|
u[1] = 2*(h[0] + h[1]);
|
|
v[0] = 0;
|
|
v[1] = 6*(m[1] - m[0]);
|
|
for(i =2; i < n-1; i++){
|
|
u[i] = 2*(h[i-1]+h[i]) - h[i-1]*h[i-1]/u[i-1];
|
|
v[i] = 6*(m[i]-m[i-1]) - h[i-1]*v[i-1]/u[i-1];
|
|
}
|
|
|
|
s = [];
|
|
s[n-1] = s[0] = 0;
|
|
for(i = n -2; i>=1; i--)
|
|
s[i] = (v[i] - h[i]*s[i+1])/u[i];
|
|
|
|
a = []; b = []; c = []; d = [];
|
|
|
|
for(i =0; i<n-1;i++){
|
|
a[i] = points[i].y;
|
|
b[i] = - h[i]*s[i+1]/6 - h[i]*s[i]/3 + (points[i+1].y-points[i].y)/h[i];
|
|
c[i] = s[i]/2;
|
|
d[i] = (s[i+1] - s[i])/(6*h[i]);
|
|
}
|
|
return {a:a,b:b,c:c,d:d};
|
|
},
|
|
/*returns the y position of the spline point */
|
|
_getSplineYPoint:function(x,xi,i,a,b,c,d){
|
|
return a[i] + (x - xi)*(b[i] + (x-xi)*(c[i]+(x-xi)*d[i]));
|
|
}
|
|
});
|
|
webix.extend(webix.ui.chart,{
|
|
/**
|
|
* renders an area chart
|
|
* @param: ctx - canvas object
|
|
* @param: data - object those need to be displayed
|
|
* @param: width - the width of the container
|
|
* @param: height - the height of the container
|
|
* @param: sIndex - index of drawing chart
|
|
*/
|
|
$render_area:function(ctx, data, point0, point1, sIndex, map){
|
|
|
|
var align, config, i, mapRect, obj, params, path,
|
|
res1, res2, x0, x1, y1, x2, y2, y0;
|
|
|
|
params = this._calculateLineParams(ctx,data,point0,point1,sIndex);
|
|
config = this._settings;
|
|
|
|
//the size of map area
|
|
mapRect = (config.eventRadius||Math.floor(params.cellWidth/2));
|
|
|
|
if (data.length) {
|
|
|
|
// area points
|
|
path = [];
|
|
|
|
//the x position of the first item
|
|
x0 = (!config.offset?point0.x:point0.x+params.cellWidth*0.5);
|
|
|
|
/*
|
|
iterates over all data items:
|
|
calculates [x,y] for area path, adds rect to chart map and renders labels
|
|
*/
|
|
for(i=0; i < data.length;i ++){
|
|
obj = data[i];
|
|
|
|
res2 = this._getPointY(obj,point0,point1,params);
|
|
x2 = x0 + params.cellWidth*i ;
|
|
if(res2){
|
|
y2 = (typeof res2 == "object"?res2.y0:res2);
|
|
if(i && this._settings.fixOverflow){
|
|
res1 = this._getPointY(data[i-1],point0,point1,params);
|
|
if(res1.out && res1.out == res2.out){
|
|
continue;
|
|
}
|
|
x1 = params.cellWidth*(i-1) - 0.5 + x0;
|
|
y1 = (typeof res1 == "object"?res1.y0:res1);
|
|
if(res1.out){
|
|
y0 = (res1.out == "min"?point1.y:point0.y);
|
|
path.push([this._calcOverflowX(x1,x2,y1,y2,y0),y0]);
|
|
}
|
|
if(res2.out){
|
|
y0 = (res2.out == "min"?point1.y:point0.y);
|
|
path.push([this._calcOverflowX(x1,x2,y1,y2,y0),y0]);
|
|
if(i == (data.length-1) && y0 == point0.y)
|
|
path.push([x2,point0.y]);
|
|
}
|
|
}
|
|
if(!res2.out){
|
|
path.push([x2,y2]);
|
|
//map
|
|
map.addRect(obj.id,[x2-mapRect-point0.x,y2-mapRect-point0.y,x2+mapRect-point0.x,y2+mapRect-point0.y],sIndex);
|
|
}
|
|
|
|
//labels
|
|
if(!config.yAxis){
|
|
align = (!config.offset&&(i == data.length-1)?"left":"center");
|
|
this.canvases[sIndex].renderTextAt(false, align, x2, y2-config.labelOffset,config.label(obj));
|
|
}
|
|
}
|
|
|
|
}
|
|
if(path.length){
|
|
path.push([x2,point1.y]);
|
|
path.push([path[0][0],point1.y]);
|
|
}
|
|
|
|
|
|
|
|
//filling area
|
|
ctx.globalAlpha = this._settings.alpha.call(this,data[0]);
|
|
ctx.fillStyle = this._settings.color.call(this,data[0]);
|
|
ctx.beginPath();
|
|
this._path(ctx,path);
|
|
ctx.fill();
|
|
|
|
//border
|
|
if(config.border){
|
|
ctx.lineWidth = config.borderWidth||1;
|
|
if(config.borderColor)
|
|
ctx.strokeStyle = config.borderColor.call(this,data[0]);
|
|
else
|
|
this._setBorderStyles(ctx,ctx.fillStyle);
|
|
|
|
ctx.beginPath();
|
|
this._path(ctx,path);
|
|
ctx.stroke();
|
|
|
|
}
|
|
ctx.lineWidth = 1;
|
|
ctx.globalAlpha =1;
|
|
|
|
}
|
|
},
|
|
|
|
/**
|
|
* renders an area chart
|
|
* @param: ctx - canvas object
|
|
* @param: data - object those need to be displayed
|
|
* @param: width - the width of the container
|
|
* @param: height - the height of the container
|
|
* @param: sIndex - index of drawing chart
|
|
*/
|
|
$render_stackedArea:function(ctx, data, point0, point1, sIndex, map){
|
|
|
|
var a0, a1, align, config, i, j, lastItem, mapRect, obj, params, path, x, y, yPos;
|
|
|
|
params = this._calculateLineParams(ctx,data,point0,point1,sIndex);
|
|
|
|
config = this._settings;
|
|
|
|
/*the value that defines the map area position*/
|
|
mapRect = (config.eventRadius||Math.floor(params.cellWidth/2));
|
|
|
|
|
|
/*drawing all items*/
|
|
if (data.length) {
|
|
|
|
// area points
|
|
path = [];
|
|
|
|
// y item positions
|
|
yPos = [];
|
|
|
|
//the x position of the first item
|
|
x = (!config.offset?point0.x:point0.x+params.cellWidth*0.5);
|
|
|
|
|
|
var setOffset = function(i,y){
|
|
return sIndex?(data[i].$startY?y-point1.y+data[i].$startY:0):y;
|
|
};
|
|
|
|
var solveEquation = function(x,p0,p1){
|
|
var k = (p1.y - p0.y)/(p1.x - p0.x);
|
|
return k*x + p0.y - k*p0.x;
|
|
};
|
|
|
|
/*
|
|
iterates over all data items:
|
|
calculates [x,y] for area path, adds rect to chart map and renders labels
|
|
*/
|
|
|
|
for(i=0; i < data.length;i ++){
|
|
obj = data[i];
|
|
|
|
if(!i){
|
|
y = setOffset(i,point1.y);
|
|
path.push([x,y]);
|
|
}
|
|
else{
|
|
x += params.cellWidth ;
|
|
}
|
|
|
|
y = setOffset(i,this._getPointY(obj,point0,point1,params));
|
|
|
|
yPos.push((isNaN(y)&&!i)?(data[i].$startY||point1.y):y);
|
|
|
|
if(y){
|
|
path.push([x,y]);
|
|
|
|
//map
|
|
map.addRect(obj.id,[x-mapRect-point0.x,y-mapRect-point0.y,x+mapRect-point0.x,y+mapRect-point0.y],sIndex);
|
|
|
|
//labels
|
|
if(!config.yAxis){
|
|
align = (!config.offset&&lastItem?"left":"center");
|
|
this.canvases[sIndex].renderTextAt(false, align, x, y-config.labelOffset,config.label(obj));
|
|
}
|
|
}
|
|
}
|
|
|
|
// bottom right point
|
|
path.push([x,setOffset(i-1,point1.y)]);
|
|
|
|
// lower border from the end to start
|
|
if(sIndex){
|
|
for(i=data.length-2; i > 0; i --){
|
|
x -= params.cellWidth ;
|
|
y = data[i].$startY;
|
|
if(y)
|
|
path.push([x,y]);
|
|
}
|
|
}
|
|
|
|
// go to start point
|
|
path.push([path[0][0],path[0][1]]);
|
|
|
|
// filling path
|
|
ctx.globalAlpha = this._settings.alpha.call(this,data[0]);
|
|
ctx.fillStyle = this._settings.color.call(this,data[0]);
|
|
ctx.beginPath();
|
|
this._path(ctx,path);
|
|
ctx.fill();
|
|
|
|
// set y positions of the next series
|
|
for(i=0; i < data.length;i ++){
|
|
y = yPos[i];
|
|
|
|
if(!y){
|
|
if(i == data.length-1){
|
|
y = data[i].$startY;
|
|
}
|
|
for(j =i+1; j< data.length; j++){
|
|
if(yPos[j]){
|
|
a0 = {x:point0.x,y:yPos[0]};
|
|
a1 = {x:(point0.x+params.cellWidth*j),y:yPos[j]};
|
|
y = solveEquation(point0.x+params.cellWidth*i,a0,a1);
|
|
break;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
data[i].$startY = y;
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
});
|
|
//+stackedArea
|
|
webix.extend(webix.ui.chart, {
|
|
$render_radar:function(ctx,data,x,y,sIndex,map){
|
|
this._renderRadarChart(ctx,data,x,y,sIndex,map);
|
|
|
|
},
|
|
/**
|
|
* renders a pie chart
|
|
* @param: ctx - canvas object
|
|
* @param: data - object those need to be displayed
|
|
* @param: x - the width of the container
|
|
* @param: y - the height of the container
|
|
* @param: ky - value from 0 to 1 that defines an angle of inclination (0<ky<1 - 3D chart)
|
|
*/
|
|
_renderRadarChart:function(ctx,data,point0,point1,sIndex,map){
|
|
if(!data.length)
|
|
return;
|
|
var coord = this._getPieParameters(point0,point1);
|
|
/*scale radius*/
|
|
var radius = (this._settings.radius?this._settings.radius:coord.radius);
|
|
/*scale center*/
|
|
var x0 = (this._settings.x?this._settings.x:coord.x);
|
|
var y0 = (this._settings.y?this._settings.y:coord.y);
|
|
/*angles for each unit*/
|
|
var ratioUnits = [];
|
|
for(var i=0;i<data.length;i++)
|
|
ratioUnits.push(1);
|
|
var ratios = this._getRatios(ratioUnits,data.length);
|
|
this._mapStart = point0;
|
|
if(!sIndex)
|
|
this._drawRadarAxises(ratios,x0,y0,radius,data);
|
|
this._drawRadarData(ctx,ratios,x0,y0,radius,data,sIndex,map);
|
|
},
|
|
_drawRadarData:function(ctx,ratios,x,y,radius,data,sIndex,map){
|
|
var alpha0 ,alpha1, config, i, min, max, pos0, pos1, posArr,
|
|
r0, r1, relValue, startAlpha, value, value0, value1, valueFactor,
|
|
unit, unitArr;
|
|
config = this._settings;
|
|
/*unit calculation (item_radius_pos = value*unit)*/
|
|
min = config.yAxis.start;
|
|
max = config.yAxis.end;
|
|
unitArr = this._getRelativeValue(min,max);
|
|
relValue = unitArr[0];
|
|
unit = (relValue?radius/relValue:radius/2);
|
|
valueFactor = unitArr[1];
|
|
|
|
startAlpha = -Math.PI/2;
|
|
alpha0 = alpha1 = startAlpha;
|
|
posArr = [];
|
|
pos1 = 0;
|
|
for(i=0;i<data.length;i++){
|
|
if(!value1){
|
|
value = config.value(data[i]);
|
|
if(this._logScaleCalc)
|
|
value = this._log10(value);
|
|
/*a relative value*/
|
|
value0 = (parseFloat(value||0) - min)*valueFactor;
|
|
}
|
|
else
|
|
value0 = value1;
|
|
r0 = Math.floor(unit*value0);
|
|
|
|
value = config.value((i!=(data.length-1))?data[i+1]:data[0]);
|
|
if(this._logScaleCalc)
|
|
value = this._log10(value);
|
|
|
|
value1 = (parseFloat(value||0) - min)*valueFactor;
|
|
r1 = Math.floor(unit*value1);
|
|
alpha0 = alpha1;
|
|
alpha1 = ((i!=(data.length-1))?(startAlpha+ratios[i]-0.0001):startAlpha);
|
|
pos0 = (pos1||this._getPositionByAngle(alpha0,x,y,r0));
|
|
pos1 = this._getPositionByAngle(alpha1,x,y,r1);
|
|
/*creates map area*/
|
|
/*areaWidth = (config.eventRadius||(parseInt(config.item.radius.call(this,data[i]),10)+config.item.borderWidth));
|
|
map.addRect(data[i].id,[pos0.x-areaWidth,pos0.y-areaWidth,pos0.x+areaWidth,pos0.y+areaWidth],sIndex);*/
|
|
//this._drawLine(ctx,pos0.x,pos0.y,pos1.x,pos1.y,config.line.color.call(this,data[i]),config.line.width)
|
|
posArr.push(pos0);
|
|
}
|
|
if(config.fill)
|
|
this._fillRadarChart(ctx,posArr,data);
|
|
if(!config.disableLines && data.length>2)
|
|
this._strokeRadarChart(ctx,posArr,data);
|
|
if(!config.disableItems || data.length<3)
|
|
this._drawRadarItemMarkers(ctx,posArr,data,sIndex,map);
|
|
posArr = null;
|
|
},
|
|
_drawRadarItemMarkers:function(ctx,points,data,sIndex,map){
|
|
for(var i=0;i < points.length;i++){
|
|
this._drawItem(ctx,points[i].x,points[i].y,data[i],this._settings.label.call(this,data),sIndex,map);
|
|
}
|
|
},
|
|
_fillRadarChart:function(ctx,points,data){
|
|
var pos0,pos1;
|
|
ctx.globalAlpha= this._settings.alpha.call(this,{});
|
|
|
|
ctx.beginPath();
|
|
for(var i=0;i < points.length;i++){
|
|
ctx.fillStyle = this._settings.fill.call(this,data[i]);
|
|
pos0 = points[i];
|
|
pos1 = (points[i+1]|| points[0]);
|
|
if(!i){
|
|
|
|
ctx.moveTo(pos0.x,pos0.y);
|
|
}
|
|
ctx.lineTo(pos1.x,pos1.y);
|
|
}
|
|
ctx.fill();
|
|
ctx.globalAlpha=1;
|
|
},
|
|
_strokeRadarChart:function(ctx,points,data){
|
|
var pos0,pos1;
|
|
for(var i=0;i < points.length;i++){
|
|
pos0 = points[i];
|
|
pos1 = (points[i+1]|| points[0]);
|
|
this._drawLine(ctx,pos0.x,pos0.y,pos1.x,pos1.y,this._settings.line.color.call(this,data[i]),this._settings.line.width);
|
|
}
|
|
},
|
|
_drawRadarAxises:function(ratios,x,y,radius,data){
|
|
var configY = this._settings.yAxis;
|
|
var configX = this._settings.xAxis;
|
|
var start = configY.start;
|
|
var end = configY.end;
|
|
var step = configY.step;
|
|
var scaleParam= {};
|
|
var config = this._configYAxis;
|
|
if(typeof config.step =="undefined"||typeof config.start=="undefined"||typeof config.end =="undefined"){
|
|
var limits = this._getLimits();
|
|
scaleParam = this._calculateScale(limits.min,limits.max);
|
|
start = scaleParam.start;
|
|
end = scaleParam.end;
|
|
step = scaleParam.step;
|
|
configY.end = end;
|
|
configY.start = start;
|
|
}
|
|
var units = [];
|
|
var i,j,p;
|
|
var c=0;
|
|
var stepHeight = radius*step/(end-start);
|
|
/*correction for small step*/
|
|
var power,corr;
|
|
if(step<1){
|
|
power = Math.min(this._log10(step),(start<=0?0:this._log10(start)));
|
|
corr = Math.pow(10,-power);
|
|
}
|
|
var angles = [];
|
|
if(!this.canvases["scale"])
|
|
this.canvases["scale"] = this._createCanvas("radar_scale");
|
|
var ctx = this.canvases["scale"].getCanvas();
|
|
for(i = end; i>=start; i -=step){
|
|
var value = this._logScaleCalc?Math.pow(10,i):i;
|
|
if(scaleParam.fixNum) value = parseFloat(i).toFixed(scaleParam.fixNum);
|
|
|
|
units.push(Math.floor(c*stepHeight)+ 0.5);
|
|
if(corr && !this._logScaleCalc){
|
|
value = Math.round(value*corr)/corr;
|
|
i = value;
|
|
}
|
|
var unitY = y-radius+units[units.length-1];
|
|
|
|
this.canvases["scale"].renderTextAt("middle","left",x,unitY,
|
|
configY.template(value.toString()),
|
|
"webix_axis_item_y webix_radar"
|
|
);
|
|
if(ratios.length<2){
|
|
this._drawScaleSector(ctx,"arc",x,y,radius-units[units.length-1],-Math.PI/2,3*Math.PI/2,i);
|
|
return;
|
|
}
|
|
var startAlpha = -Math.PI/2;/*possibly need to moved in config*/
|
|
var alpha0 = startAlpha;
|
|
var alpha1;
|
|
|
|
for(j=0;j< ratios.length;j++){
|
|
if(!c)
|
|
angles.push(alpha0);
|
|
alpha1 = startAlpha+ratios[j]-0.0001;
|
|
this._drawScaleSector(ctx,(ratios.length>2?(config.lineShape||"line"):"arc"),x,y,radius-units[units.length-1],alpha0,alpha1,i,j,data[i]);
|
|
alpha0 = alpha1;
|
|
}
|
|
c++;
|
|
}
|
|
/*renders radius lines and labels*/
|
|
for(i=0;i< angles.length;i++){
|
|
p = this._getPositionByAngle(angles[i],x,y,radius);
|
|
if(configX.lines.call(this,data[i],i))
|
|
this._drawLine(ctx,x,y,p.x,p.y,(configX?configX.lineColor.call(this,data[i]):"#cfcfcf"),1);
|
|
this._drawRadarScaleLabel(ctx,x,y,radius,angles[i],(configX?configX.template.call(this,data[i]):" "));
|
|
}
|
|
|
|
},
|
|
_drawScaleSector:function(ctx,shape,x,y,radius,a1,a2,i,j){
|
|
var pos1, pos2;
|
|
if(radius<0)
|
|
return false;
|
|
pos1 = this._getPositionByAngle(a1,x,y,radius);
|
|
pos2 = this._getPositionByAngle(a2,x,y,radius);
|
|
var configY = this._settings.yAxis;
|
|
if(configY.bg){
|
|
ctx.beginPath();
|
|
ctx.moveTo(x,y);
|
|
if(shape=="arc")
|
|
ctx.arc(x,y,radius,a1,a2,false);
|
|
else{
|
|
ctx.lineTo(pos1.x,pos1.y);
|
|
ctx.lineTo(pos2.x,pos2.y);
|
|
}
|
|
ctx.fillStyle = configY.bg(i,j);
|
|
ctx.moveTo(x,y);
|
|
ctx.fill();
|
|
ctx.closePath();
|
|
}
|
|
if(configY.lines.call(this,i)){
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
if(shape=="arc")
|
|
ctx.arc(x,y,radius,a1,a2,false);
|
|
else{
|
|
ctx.moveTo(pos1.x,pos1.y);
|
|
ctx.lineTo(pos2.x,pos2.y);
|
|
}
|
|
ctx.strokeStyle = configY.lineColor.call(this,i);
|
|
ctx.stroke();
|
|
}
|
|
},
|
|
_drawRadarScaleLabel:function(ctx,x,y,r,a,text){
|
|
var t = this.canvases["scale"].renderText(0,0,text,"webix_axis_radar_title",1);
|
|
var width = t.scrollWidth;
|
|
var height = t.offsetHeight;
|
|
var delta = 0.001;
|
|
var pos = this._getPositionByAngle(a,x,y,r+5);
|
|
var corr_x=0,corr_y=0;
|
|
if(a<0||a>Math.PI){
|
|
corr_y = -height;
|
|
}
|
|
if(a>Math.PI/2){
|
|
corr_x = -width;
|
|
}
|
|
if(Math.abs(a+Math.PI/2)<delta||Math.abs(a-Math.PI/2)<delta){
|
|
corr_x = -width/2;
|
|
}
|
|
else if(Math.abs(a)<delta||Math.abs(a-Math.PI)<delta){
|
|
corr_y = -height/2;
|
|
}
|
|
t.style.top = pos.y+corr_y+"px";
|
|
t.style.left = pos.x+corr_x+"px";
|
|
t.style.width = width+"px";
|
|
t.style.whiteSpace = "nowrap";
|
|
}
|
|
});
|
|
webix.extend(webix.ui.chart, {
|
|
|
|
/**
|
|
* renders a graphic
|
|
* @param: ctx - canvas object
|
|
* @param: data - object those need to be displayed
|
|
* @param: point0 - top left point of a chart
|
|
* @param: point1 - right bottom point of a chart
|
|
* @param: sIndex - index of drawing chart
|
|
* @param: map - map object
|
|
*/
|
|
$render_scatter:function(ctx, data, point0, point1, sIndex, map){
|
|
if(!this._settings.xValue)
|
|
return webix.log("warning","Undefined propery: xValue");
|
|
/*max in min values*/
|
|
var limitsY = this._getLimits();
|
|
var limitsX = this._getLimits("h","xValue");
|
|
/*render scale*/
|
|
if(!sIndex){
|
|
if(!this.canvases["x"])
|
|
this.canvases["x"] = this._createCanvas("axis_x");
|
|
if(!this.canvases["y"])
|
|
this.canvases["y"] = this._createCanvas("axis_y");
|
|
this._drawYAxis(this.canvases["y"].getCanvas(),data,point0,point1,limitsY.min,limitsY.max);
|
|
this._drawHXAxis(this.canvases["x"].getCanvas(),data,point0,point1,limitsX.min,limitsX.max);
|
|
}
|
|
limitsY = {min:this._settings.yAxis.start,max:this._settings.yAxis.end};
|
|
limitsX = {min:this._settings.xAxis.start,max:this._settings.xAxis.end};
|
|
var params = this._getScatterParams(ctx,data,point0,point1,limitsX,limitsY);
|
|
this._mapStart = point0;
|
|
for(var i=0;i<data.length;i++){
|
|
this._drawScatterItem(ctx,map,point0, point1, params,limitsX,limitsY,data[i],sIndex);
|
|
}
|
|
},
|
|
_getScatterParams:function(ctx, data, point0, point1,limitsX,limitsY){
|
|
var params = {};
|
|
/*available space*/
|
|
params.totalHeight = point1.y-point0.y;
|
|
/*available width*/
|
|
params.totalWidth = point1.x-point0.x;
|
|
/*unit calculation (y_position = value*unit)*/
|
|
this._calcScatterUnit(params,limitsX.min,limitsX.max,params.totalWidth,"X");
|
|
this._calcScatterUnit(params,limitsY.min,limitsY.max,params.totalHeight,"Y");
|
|
return params;
|
|
},
|
|
_drawScatterItem:function(ctx,map,point0, point1,params,limitsX,limitsY,obj,sIndex){
|
|
var x0 = this._calculateScatterItemPosition(params, point1, point0, limitsX, obj, "X");
|
|
var y0 = this._calculateScatterItemPosition(params, point0, point1, limitsY, obj, "Y");
|
|
this. _drawItem(ctx,x0,y0,obj,this._settings.label.call(this,obj),sIndex,map);
|
|
},
|
|
_calculateScatterItemPosition:function(params, point0, point1, limits, obj, axis){
|
|
/*the real value of an object*/
|
|
var value = this._settings[axis=="X"?"xValue":"value"].call(this,obj);
|
|
/*a relative value*/
|
|
var valueFactor = params["valueFactor"+axis];
|
|
var v = (parseFloat(value||0) - limits.min)*valueFactor;
|
|
/*a vertical coordinate*/
|
|
var unit = params["unit"+axis];
|
|
var pos = point1[axis.toLowerCase()] - (axis=="X"?(-1):1)*Math.floor(unit*v);
|
|
/*the limit of the minimum value is the minimum visible value*/
|
|
if(v<0)
|
|
pos = point1[axis.toLowerCase()];
|
|
/*the limit of the maximum value*/
|
|
if(value > limits.max)
|
|
pos = point0[axis.toLowerCase()];
|
|
/*the limit of the minimum value*/
|
|
if(value < limits.min)
|
|
pos = point1[axis.toLowerCase()];
|
|
return pos;
|
|
},
|
|
_calcScatterUnit:function(p,min,max,size,axis){
|
|
var relativeValues = this._getRelativeValue(min,max);
|
|
axis = (axis||"");
|
|
p["relValue"+axis] = relativeValues[0];
|
|
p["valueFactor"+axis] = relativeValues[1];
|
|
p["unit"+axis] = (p["relValue"+axis]?size/p["relValue"+axis]:10);
|
|
}
|
|
});
|
|
/*chart presents*/
|
|
webix.extend(webix.ui.chart, {
|
|
presets:{
|
|
"simple":{
|
|
item:{
|
|
borderColor: "#ffffff",
|
|
color: "#2b7100",
|
|
shadow: false,
|
|
borderWidth:2
|
|
},
|
|
line:{
|
|
color:"#8ecf03",
|
|
width:2
|
|
}
|
|
},
|
|
"plot":{
|
|
color:"#1293f8",
|
|
item:{
|
|
borderColor:"#636363",
|
|
borderWidth:1,
|
|
color: "#ffffff",
|
|
type:"r",
|
|
shadow: false
|
|
},
|
|
line:{
|
|
color:"#1293f8",
|
|
width:2
|
|
}
|
|
},
|
|
"diamond":{
|
|
color:"#b64040",
|
|
item:{
|
|
borderColor:"#b64040",
|
|
color: "#b64040",
|
|
type:"d",
|
|
radius:3,
|
|
shadow:true
|
|
},
|
|
line:{
|
|
color:"#ff9000",
|
|
width:2
|
|
}
|
|
},
|
|
"point":{
|
|
color:"#fe5916",
|
|
disableLines:true,
|
|
fill:false,
|
|
disableItems:false,
|
|
item:{
|
|
color:"#feb916",
|
|
borderColor:"#fe5916",
|
|
radius:2,
|
|
borderWidth:1,
|
|
type:"r"
|
|
},
|
|
alpha:1
|
|
},
|
|
"line":{
|
|
line:{
|
|
color:"#3399ff",
|
|
width:2
|
|
},
|
|
item:{
|
|
color:"#ffffff",
|
|
borderColor:"#3399ff",
|
|
radius:2,
|
|
borderWidth:2,
|
|
type:"d"
|
|
},
|
|
fill:false,
|
|
disableItems:false,
|
|
disableLines:false,
|
|
alpha:1
|
|
},
|
|
"area":{
|
|
fill:"#3399ff",
|
|
line:{
|
|
color:"#3399ff",
|
|
width:1
|
|
},
|
|
disableItems:true,
|
|
alpha: 0.2,
|
|
disableLines:false
|
|
},
|
|
"round":{
|
|
item:{
|
|
radius:3,
|
|
borderColor:"#3f83ff",
|
|
borderWidth:1,
|
|
color:"#3f83ff",
|
|
type:"r",
|
|
shadow:false,
|
|
alpha:0.6
|
|
}
|
|
},
|
|
"square":{
|
|
item:{
|
|
radius:3,
|
|
borderColor:"#447900",
|
|
borderWidth:2,
|
|
color:"#69ba00",
|
|
type:"s",
|
|
shadow:false,
|
|
alpha:1
|
|
}
|
|
},
|
|
/*bar*/
|
|
"column":{
|
|
color:"RAINBOW",
|
|
gradient:false,
|
|
barWidth:45,
|
|
radius:0,
|
|
alpha:1,
|
|
border:true
|
|
},
|
|
"stick":{
|
|
barWidth:5,
|
|
gradient:false,
|
|
color:"#67b5c9",
|
|
radius:2,
|
|
alpha:1,
|
|
border:false
|
|
},
|
|
"alpha":{
|
|
color:"#b9a8f9",
|
|
barWidth:70,
|
|
gradient:"falling",
|
|
radius:0,
|
|
alpha:0.5,
|
|
border:true
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
/*
|
|
UI:Calendar
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
webix.protoUI({
|
|
name:"calendar",
|
|
|
|
defaults:{
|
|
date: new Date(), //selected date, not selected by default
|
|
select: false,
|
|
navigation: true,
|
|
monthSelect: true,
|
|
weekHeader: true,
|
|
weekNumber: false,
|
|
skipEmptyWeeks: false,
|
|
|
|
calendarHeader: "%F %Y",
|
|
calendarWeekHeader: "W#",
|
|
//calendarTime: "%H:%i",
|
|
events:webix.Date.isHoliday,
|
|
minuteStep: 5,
|
|
icons: false,
|
|
timepickerHeight: 30,
|
|
headerHeight: 70,
|
|
dayTemplate: function(d){
|
|
return d.getDate();
|
|
},
|
|
width: 260,
|
|
height: 250
|
|
},
|
|
|
|
dayTemplate_setter: webix.template,
|
|
calendarHeader_setter:webix.Date.dateToStr,
|
|
calendarWeekHeader_setter:webix.Date.dateToStr,
|
|
calendarTime_setter:function(format){
|
|
this._calendarTime = format;
|
|
return webix.Date.dateToStr(format);
|
|
},
|
|
date_setter:function(date){
|
|
return this._string_to_date(date);
|
|
},
|
|
maxDate_setter:function(date){
|
|
return this._string_to_date(date);
|
|
},
|
|
minDate_setter:function(date){
|
|
return this._string_to_date(date);
|
|
},
|
|
minTime_setter:function(time){
|
|
if(typeof(time) == "string"){
|
|
time = webix.i18n.parseTimeFormatDate(time);
|
|
time = [time.getHours(),time.getMinutes()];
|
|
|
|
}
|
|
|
|
return time;
|
|
},
|
|
maxTime_setter:function(time){
|
|
if(typeof(time) == "string"){
|
|
time = webix.i18n.parseTimeFormatDate(time);
|
|
time = [time.getHours(),time.getMinutes()];
|
|
|
|
}
|
|
return time;
|
|
},
|
|
$init: function() {
|
|
this._viewobj.className += " webix_calendar";
|
|
|
|
//special dates
|
|
this._special_dates = {};
|
|
this._selected_date_part = this._selected_date = null;
|
|
this._zoom_level = 0;
|
|
},
|
|
type_setter: function(value){
|
|
if(value == "time"){
|
|
this._zoom_in = true;
|
|
this._zoom_level = -1;
|
|
}
|
|
else if(value == "year"){
|
|
this._fixed = true;
|
|
}
|
|
return value;
|
|
},
|
|
$setSize:function(x,y){
|
|
|
|
if(webix.ui.view.prototype.$setSize.call(this,x,y)){
|
|
//repaint calendar when size changed
|
|
this.render();
|
|
}
|
|
},
|
|
$getSize:function(dx, dy){
|
|
if (this._settings.cellHeight){
|
|
var state = this._getDateBoundaries(this._settings.date);
|
|
this._settings.height = this._settings.cellHeight * state._rows + (webix.skin.$active.calendarHeight||70);
|
|
}
|
|
return webix.ui.view.prototype.$getSize.call(this, dx,dy);
|
|
},
|
|
_getDateBoundaries: function(date, reset) {
|
|
// addition information about rendering event:
|
|
// how many days from the previous month,
|
|
// next,
|
|
// number of weeks to display and so on
|
|
|
|
if (!this._set_date_bounds || reset){
|
|
var month = date.getMonth();
|
|
var year = date.getFullYear();
|
|
|
|
var next = new Date(year, month+1, 1);
|
|
var start = webix.Date.weekStart(new Date(year, month, 1));
|
|
|
|
var days = Math.round((next.valueOf() - start.valueOf())/(60*1000*60*24));
|
|
var rows = this._settings.skipEmptyWeeks?Math.ceil(days/7):6;
|
|
|
|
this._set_date_bounds = { _month: month, _start:start, _next:next, _rows: rows};
|
|
}
|
|
|
|
return this._set_date_bounds;
|
|
},
|
|
$skin:function(){
|
|
if(webix.skin.$active.calendar){
|
|
if( webix.skin.$active.calendar.width)
|
|
this.defaults.width = webix.skin.$active.calendar.width;
|
|
if( webix.skin.$active.calendar.height)
|
|
this.defaults.height = webix.skin.$active.calendar.height;
|
|
if( webix.skin.$active.calendar.headerHeight)
|
|
this.defaults.headerHeight = webix.skin.$active.calendar.headerHeight;
|
|
if( webix.skin.$active.calendar.timepickerHeight)
|
|
this.defaults.timepickerHeight = webix.skin.$active.calendar.timepickerHeight;
|
|
}
|
|
|
|
},
|
|
_getColumnConfigSizes: function(date){
|
|
var bounds = this._getDateBoundaries(date);
|
|
|
|
var s = this._settings;
|
|
var _columnsHeight = [];
|
|
var _columnsWidth = [];
|
|
|
|
var containerWidth = this._content_width - 36;
|
|
|
|
var containerHeight = this._content_height - this._settings.headerHeight - 10 - (this._settings.timepicker||this._icons?this._settings.timepickerHeight:0);
|
|
|
|
var columnsNumber = (s.weekNumber)?8:7;
|
|
for(var i=0; i<columnsNumber; i++) {
|
|
_columnsWidth[i] = Math.ceil(containerWidth/(columnsNumber-i));
|
|
containerWidth -= _columnsWidth[i];
|
|
}
|
|
|
|
var rowsNumber = bounds._rows;
|
|
for (var k = 0; k < rowsNumber; k++) {
|
|
_columnsHeight[k] = Math.ceil(containerHeight/(rowsNumber-k) );
|
|
containerHeight -= _columnsHeight[k];
|
|
}
|
|
return [_columnsWidth, _columnsHeight];
|
|
},
|
|
icons_setter: function(value){
|
|
if(!value)
|
|
this._icons = null;
|
|
else if(typeof value == "object")
|
|
this._icons = value;
|
|
else
|
|
this._icons = this._icons2;
|
|
},
|
|
_icons: [],
|
|
_icons2: [
|
|
|
|
{
|
|
template: function(){
|
|
return "<span class='webix_cal_icon_today webix_cal_icon'>"+webix.i18n.calendar.today+"</span>";
|
|
},
|
|
on_click:{
|
|
"webix_cal_icon_today": function(){
|
|
this.setValue(new Date());
|
|
this.callEvent("onTodaySet",[this.getSelectedDate()]);
|
|
}
|
|
}
|
|
},
|
|
{
|
|
template: function(){
|
|
return "<span class='webix_cal_icon_clear webix_cal_icon'>"+webix.i18n.calendar.clear+"</span>";
|
|
},
|
|
on_click:{
|
|
"webix_cal_icon_clear": function(){
|
|
this.setValue("");
|
|
this.callEvent("onDateClear",[this.getSelectedDate()]);
|
|
}
|
|
}
|
|
}
|
|
],
|
|
refresh:function(){ this.render(); },
|
|
render: function() {
|
|
//reset zoom level
|
|
this._zoom_level = 0;
|
|
this._zoom_size = false;
|
|
|
|
var s = this._settings;
|
|
|
|
if (!this.isVisible(s.id)) return;
|
|
this._current_time = webix.Date.datePart(new Date());
|
|
|
|
if (webix.debug_render)
|
|
webix.log("Render: "+this.name+"@"+s.id);
|
|
this.callEvent("onBeforeRender",[]);
|
|
|
|
var date = this._settings.date;
|
|
|
|
var bounds = this._getDateBoundaries(date, true);
|
|
var sizes = this._getColumnConfigSizes(date);
|
|
var width = sizes[0];
|
|
var height = sizes[1];
|
|
|
|
var html = "<div class='webix_cal_month'><span class='webix_cal_month_name"+(!this._settings.monthSelect?" webix_readonly":"")+"'>"+s.calendarHeader(date)+'</span>';
|
|
if (s.navigation)
|
|
html += "<div class='webix_cal_prev_button'></div><div class='webix_cal_next_button'></div>";
|
|
html += "</div>";
|
|
|
|
if(s.weekHeader)
|
|
html += "<div class='webix_cal_header'>"+this._week_template(width)+"</div>";
|
|
html += "<div class='webix_cal_body'>"+this._body_template(width, height, bounds)+"</div>";
|
|
|
|
if (this._settings.timepicker || this._icons){
|
|
html += "<div class='webix_cal_footer'>";
|
|
if(this._settings.timepicker)
|
|
html += this._timepicker_template(date);
|
|
|
|
if(this._icons)
|
|
html += this._icons_template();
|
|
html += "</div>";
|
|
}
|
|
|
|
|
|
this._contentobj.innerHTML = html;
|
|
|
|
if(this._settings.type == "time"){
|
|
var time = this._settings.date;
|
|
if(time){
|
|
if(typeof(time) == "string"){
|
|
date = webix.i18n.parseTimeFormatDate(time);
|
|
}
|
|
else if(webix.isArray(time)){
|
|
date.setHours(time[0]);
|
|
date.setMinutes(time[1]);
|
|
}
|
|
}
|
|
this._changeZoomLevel(-1,date);
|
|
}
|
|
else if(this._settings.type == "month"){
|
|
this._changeZoomLevel(1,date);
|
|
}
|
|
else if(this._settings.type == "year"){
|
|
this._changeZoomLevel(2,date);
|
|
}
|
|
this.callEvent("onAfterRender",[]);
|
|
},
|
|
_icons_template: function(date){
|
|
var html = "<div class='webix_cal_icons'>";
|
|
var icons = this._icons;
|
|
|
|
for(var i=0; i < icons.length; i++){
|
|
if(icons[i].template){
|
|
var template = (typeof(icons[i].template) == "function"?icons[i].template: webix.template(icons[i].template));
|
|
html += template.call(this,date);
|
|
}
|
|
if(icons[i].on_click){
|
|
webix.extend(this.on_click,icons[i].on_click);
|
|
}
|
|
}
|
|
html += "</div>";
|
|
return html;
|
|
},
|
|
_timepicker_template:function(date){
|
|
var timeFormat = this._settings.calendarTime||webix.i18n.timeFormatStr;
|
|
return "<div class='webix_cal_time"+(this._icons?" webix_cal_time_icons":"")+"'><span class='webix_icon fa-clock-o'></span> "+timeFormat(date)+"</div>";
|
|
},
|
|
_week_template: function(widths){
|
|
var s = this._settings;
|
|
var week_template = '';
|
|
var correction = 0;
|
|
|
|
if(s.weekNumber) {
|
|
correction = 1;
|
|
week_template += "<div class='webix_cal_week_header' style='width: "+widths[0]+"px;' >"+s.calendarWeekHeader()+"</div>";
|
|
}
|
|
|
|
var k = (webix.Date.startOnMonday)?1:0;
|
|
for (var i=0; i<7; i++){ // 7 days total
|
|
var day_index = (k + i) % 7; // 0 - Sun, 6 - Sat as in Locale.date.day_short
|
|
var day = webix.i18n.calendar.dayShort[day_index]; // 01, 02 .. 31
|
|
week_template += "<div day='"+day_index+"' style='width: "+widths[i+correction]+"px;' >"+day+"</div>";
|
|
}
|
|
|
|
return week_template;
|
|
},
|
|
blockDates_setter:function(value){
|
|
return webix.toFunctor(value, this.$scope);
|
|
},
|
|
_day_css:function(day, bounds){
|
|
var css = "";
|
|
if (webix.Date.equal(day, this._current_time))
|
|
css += " webix_cal_today";
|
|
if (!this._checkDate(day))
|
|
css+= " webix_cal_day_disabled";
|
|
if (webix.Date.equal(day, this._selected_date_part))
|
|
css += " webix_cal_select";
|
|
if (day.getMonth() != bounds._month)
|
|
css += " webix_cal_outside";
|
|
if (this._settings.events)
|
|
css+=" "+this._settings.events(day);
|
|
css += " webix_cal_day";
|
|
return css;
|
|
},
|
|
_body_template: function(widths, heights, bounds){
|
|
var s = this._settings;
|
|
var html = "";
|
|
var day = webix.Date.datePart(webix.Date.copy(bounds._start));
|
|
var start = s.weekNumber?1:0;
|
|
var weekNumber = webix.Date.getISOWeek(webix.Date.add(day,2,"day", true));
|
|
var min = this._settings.minDate || new Date(1,1,1);
|
|
var max = this._settings.maxDate || new Date(9999,1,1);
|
|
|
|
for (var y=0; y<heights.length; y++){
|
|
html += "<div class='webix_cal_row' style='height:"+heights[y]+"px;line-height:"+heights[y]+"px'>";
|
|
|
|
if (start){
|
|
// recalculate week number for the first week of a year
|
|
if(!day.getMonth() && day.getDate()<7)
|
|
weekNumber = webix.Date.getISOWeek(webix.Date.add(day,2,"day", true));
|
|
html += "<div class='webix_cal_week_num' style='width:"+widths[0]+"px'>"+weekNumber+"</div>";
|
|
}
|
|
|
|
for (var x=start; x<widths.length; x++){
|
|
var css = this._day_css(day, bounds);
|
|
var d = this._settings.dayTemplate.call(this,day);
|
|
html += "<div day='"+x+"' class='"+css+"' style='width:"+widths[x]+"px'><span class='webix_cal_day_inner'>"+d+"</span></div>";
|
|
day = webix.Date.add(day, 1, "day");
|
|
if(day.getHours()){
|
|
day = webix.Date.datePart(day);
|
|
}
|
|
}
|
|
|
|
html += "</div>";
|
|
weekNumber++;
|
|
}
|
|
return html;
|
|
},
|
|
_changeDate:function(dir, step, notset){
|
|
var now = this._settings.date;
|
|
if(!step) { step = this._zoom_logic[this._zoom_level]._changeStep; }
|
|
if(!this._zoom_level){
|
|
now = webix.Date.copy(now);
|
|
now.setDate(1);
|
|
}
|
|
var next = webix.Date.add(now, dir*step, "month", true);
|
|
this._changeDateInternal(now, next);
|
|
},
|
|
_changeDateInternal:function(now, next){
|
|
if(this.callEvent("onBeforeMonthChange", [now, next])){
|
|
if (this._zoom_level){
|
|
this._update_zoom_level(next);
|
|
}
|
|
else{
|
|
this.showCalendar(next);
|
|
}
|
|
this.callEvent("onAfterMonthChange", [next, now]);
|
|
}
|
|
},
|
|
_zoom_logic:{
|
|
"-2":{
|
|
_isBlocked: function(i){
|
|
var config = this._settings,
|
|
date = config.date,
|
|
isBlocked = false;
|
|
|
|
var minHour = (config.minTime ? config.minTime[0] : 0);
|
|
var maxHour = (config.maxTime ? (config.maxTime[0] + ( config.maxTime[1] ? 1 : 0 )) : 24);
|
|
|
|
var minMinute = (config.minTime && (date.getHours()==minHour) ? config.minTime[1] : 0);
|
|
var maxMinute = (config.maxTime && config.maxTime[1] && (date.getHours()==(maxHour-1)) ? config.maxTime[1] : 60);
|
|
|
|
if(this._settings.blockTime){
|
|
var d = webix.Date.copy(date);
|
|
d.setMinutes(i);
|
|
isBlocked = this._settings.blockTime(d);
|
|
}
|
|
return (i < minMinute || i >= maxMinute || isBlocked);
|
|
|
|
},
|
|
_setContent:function(next, i){ next.setMinutes(i); }
|
|
},
|
|
"-1":{
|
|
_isBlocked: function(i){
|
|
var config = this._settings,
|
|
date = config.date;
|
|
|
|
var minHour = (config.minTime? config.minTime[0]:0);
|
|
var maxHour = (config.maxTime? config.maxTime[0]+(config.maxTime[1]?1:0):24);
|
|
|
|
if (i < minHour || i >= maxHour) return true;
|
|
|
|
if(config.blockTime){
|
|
var d = webix.Date.copy(date);
|
|
d.setHours(i);
|
|
|
|
var minMinute = (config.minTime && (i==minHour) ? config.minTime[1] : 0);
|
|
var maxMinute = (config.maxTime && config.maxTime[1] && (i==(maxHour-1)) ? config.maxTime[1] : 60);
|
|
|
|
for (var j=minMinute; j<maxMinute; j+= config.minuteStep){
|
|
d.setMinutes(j);
|
|
if (!config.blockTime(d))
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
},
|
|
_setContent:function(next, i){ next.setHours(i); }
|
|
},
|
|
"0":{
|
|
_changeStep:1
|
|
},//days
|
|
"1":{ //months
|
|
_isBlocked: function(i,calendar){
|
|
var blocked = false, minYear, maxYear,
|
|
min = calendar._settings.minDate||null,
|
|
max = calendar._settings.maxDate||null,
|
|
year = calendar._settings.date.getFullYear();
|
|
|
|
if(min && max){
|
|
minYear = min.getFullYear();
|
|
maxYear = max.getFullYear();
|
|
if(year<minYear||year==minYear&&min.getMonth()>i || year>maxYear||year==maxYear&&max.getMonth()<i)
|
|
blocked = true;
|
|
}
|
|
return blocked;
|
|
},
|
|
_correctDate: function(date,calendar){
|
|
if(date < calendar._settings.minDate){
|
|
date = webix.Date.copy(calendar._settings.minDate);
|
|
}
|
|
else if(date > calendar._settings.maxDate){
|
|
date = webix.Date.copy(calendar._settings.maxDate);
|
|
}
|
|
return date;
|
|
},
|
|
_getTitle:function(date){ return date.getFullYear(); },
|
|
_getContent:function(i){ return webix.i18n.calendar.monthShort[i]; },
|
|
_setContent:function(next, i){ if(i!=next.getMonth()) next.setDate(1);next.setMonth(i); },
|
|
_changeStep:12
|
|
},
|
|
"2":{ //years
|
|
_isBlocked: function(i,calendar){
|
|
i += this._zoom_start_date;
|
|
var blocked = false;
|
|
var min = calendar._settings.minDate;
|
|
var max = calendar._settings.maxDate;
|
|
|
|
if( min && max && (min.getFullYear()>i || max.getFullYear()<i)){
|
|
blocked = true;
|
|
}
|
|
return blocked;
|
|
},
|
|
_correctDate: function(date,calendar){
|
|
if(date < calendar._settings.minDate){
|
|
date = webix.Date.copy(calendar._settings.minDate);
|
|
}
|
|
else if(date > calendar._settings.maxDate){
|
|
date = webix.Date.copy(calendar._settings.maxDate);
|
|
}
|
|
return date;
|
|
},
|
|
_getTitle:function(date){
|
|
var start = date.getFullYear();
|
|
this._zoom_start_date = start = start - start%10 - 1;
|
|
return start+" - "+(start+10);
|
|
},
|
|
_getContent:function(i){ return this._zoom_start_date+i; },
|
|
_setContent:function(next, i){ next.setFullYear(this._zoom_start_date+i); },
|
|
_changeStep:12*10
|
|
}
|
|
},
|
|
_correctBlockedTime: function(){
|
|
var i, isDisabledHour, isDisabledMinutes;
|
|
isDisabledHour = this._zoom_logic[-1]._isBlocked.call(this,this._settings.date.getHours());
|
|
if(isDisabledHour){
|
|
for (i= 0; i< 24; i++){
|
|
if(!this._zoom_logic[-1]._isBlocked.call(this,i)){
|
|
this._settings.date.setHours(i);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
isDisabledMinutes = this._zoom_logic[-2]._isBlocked.call(this,this._settings.date.getMinutes());
|
|
if(isDisabledMinutes){
|
|
for (i=0; i<60; i+=this._settings.minuteStep){
|
|
if(!this._zoom_logic[-2]._isBlocked.call(this,i)){
|
|
this._settings.date.setMinutes(i);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
_update_zoom_level:function(date){
|
|
var config, css, height, i, index, sections, selected, type, width, zlogic;
|
|
var html = "";
|
|
|
|
config = this._settings;
|
|
index = config.weekHeader?2: 1;
|
|
zlogic = this._zoom_logic[this._zoom_level];
|
|
sections = this._contentobj.childNodes;
|
|
|
|
if (date){
|
|
config.date = date;
|
|
}
|
|
|
|
type = config.type;
|
|
|
|
|
|
|
|
//store width and height of draw area
|
|
if (!this._zoom_size){
|
|
/*this._reserve_box_height = sections[index].offsetHeight +(index==2?sections[1].offsetHeight:0);*/
|
|
|
|
this._reserve_box_height = this._contentobj.offsetHeight - config.headerHeight ;
|
|
if(type != "year" && type != "month")
|
|
this._reserve_box_height -= config.timepickerHeight;
|
|
else if(this._icons){
|
|
this._reserve_box_height -= 10;
|
|
}
|
|
this._reserve_box_width = sections[index].offsetWidth;
|
|
this._zoom_size = 1;
|
|
}
|
|
|
|
//main section
|
|
if (this._zoom_in){
|
|
//hours and minutes
|
|
height = this._reserve_box_height/6;
|
|
var timeColNum = 6;
|
|
var timeFormat = this._calendarTime||webix.i18n.timeFormat;
|
|
var enLocale = timeFormat.match(/%([a,A])/);
|
|
if(enLocale)
|
|
timeColNum++;
|
|
width = parseInt((this._reserve_box_width-3)/timeColNum,10);
|
|
|
|
html += "<div class='webix_time_header'>"+this._timeHeaderTemplate(width,enLocale)+"</div>";
|
|
html += "<div class='webix_cal_body' style='height:"+this._reserve_box_height+"px'>";
|
|
|
|
// check and change blocked selected time
|
|
this._correctBlockedTime();
|
|
|
|
html += "<div class='webix_hours'>";
|
|
selected = config.date.getHours();
|
|
for (i= 0; i< 24; i++){
|
|
css="";
|
|
if(enLocale){
|
|
if(i%4===0){
|
|
var label = (!i?"am":(i==12?"pm":""));
|
|
html += "<div class='webix_cal_block_empty"+css+"' style='"+this._getCalSizesString(width,height)+"clear:both;"+"'>"+label+"</div>";
|
|
}
|
|
}
|
|
if(this._zoom_logic[-1]._isBlocked.call(this,i)){
|
|
css += " webix_cal_day_disabled";
|
|
}
|
|
else if(selected == i)
|
|
css += " webix_selected";
|
|
var value = webix.Date.toFixed(enLocale&& i>12?i-12:i);
|
|
html += "<div class='webix_cal_block"+css+"' data-value='"+i+"' style='"+this._getCalSizesString(width,height)+(i%4===0&&!enLocale?"clear:both;":"")+"'>"+value+"</div>";
|
|
}
|
|
html += "</div>";
|
|
|
|
html += "<div class='webix_minutes'>";
|
|
selected = config.date.getMinutes();
|
|
for (i=0; i<60; i+=config.minuteStep){
|
|
css = "";
|
|
if(this._zoom_logic[-2]._isBlocked.call(this,i)){
|
|
css = " webix_cal_day_disabled";
|
|
}
|
|
else if(selected == i)
|
|
css = " webix_selected";
|
|
html += "<div class='webix_cal_block webix_cal_block_min"+css+"' data-value='"+i+"' style='"+this._getCalSizesString(width,height)+(i%2===0?"clear:both;":"")+"'>"+webix.Date.toFixed(i)+"</div>";
|
|
}
|
|
html += "</div>";
|
|
|
|
html += "</div>";
|
|
html += "<div class='webix_time_footer'>"+this._timeButtonsTemplate()+"</div>";
|
|
this._contentobj.innerHTML = html;
|
|
} else {
|
|
//years and months
|
|
//reset header
|
|
sections[0].firstChild.innerHTML = zlogic._getTitle(config.date);
|
|
height = this._reserve_box_height/3;
|
|
width = this._reserve_box_width/4;
|
|
if(this._checkDate(config.date))
|
|
selected = (this._zoom_level==1?config.date.getMonth():config.date.getFullYear());
|
|
for (i=0; i<12; i++){
|
|
css = (selected == (this._zoom_level==1?i:zlogic._getContent(i)) ? " webix_selected" : "");
|
|
if(zlogic._isBlocked(i,this)){
|
|
css += " webix_cal_day_disabled";
|
|
}
|
|
html+="<div class='webix_cal_block"+css+"' data-value='"+i+"' style='"+this._getCalSizesString(width,height)+"'>"+zlogic._getContent(i)+"</div>";
|
|
}
|
|
if(index-1){
|
|
sections[index-1].style.display = "none";
|
|
}
|
|
sections[index].innerHTML = html;
|
|
if(type != "year" && type != "month"){
|
|
if(!sections[index+1])
|
|
this._contentobj.innerHTML += "<div class='webix_time_footer'>"+this._timeButtonsTemplate()+"</div>";
|
|
else
|
|
sections[index+1].innerHTML=this._timeButtonsTemplate();
|
|
}
|
|
sections[index].style.height = this._reserve_box_height+"px";
|
|
}
|
|
},
|
|
_getCalSizesString: function(width,height){
|
|
return "width:"+width+"px; height:"+height+"px; line-height:"+height+"px;";
|
|
},
|
|
_timeButtonsTemplate: function(){
|
|
return "<input type='button' style='width:100%' class='webix_cal_done' value='"+webix.i18n.calendar.done+"'>";
|
|
},
|
|
_timeHeaderTemplate: function(width,enLocale){
|
|
var w1 = width*(enLocale?5:4);
|
|
var w2 = width*2;
|
|
return "<div class='webix_cal_hours' style='width:"+w1+"px'>"+webix.i18n.calendar.hours+"</div><div class='webix_cal_minutes' style='width:"+w2+"px'>"+webix.i18n.calendar.minutes+"</div>";
|
|
},
|
|
_changeZoomLevel: function(zoom,date){
|
|
if(this.callEvent("onBeforeZoom",[zoom])){
|
|
this._zoom_level = zoom;
|
|
|
|
if(zoom)
|
|
this._update_zoom_level(date);
|
|
else
|
|
this.showCalendar(date);
|
|
this.callEvent("onAfterZoom",[zoom]);
|
|
}
|
|
},
|
|
_correctDate:function(date){
|
|
if(!this._checkDate(date) && this._zoom_logic[this._zoom_level]._correctDate)
|
|
date = this._zoom_logic[this._zoom_level]._correctDate(date,this);
|
|
return date;
|
|
},
|
|
_mode_selected:function(value){
|
|
|
|
var now = this._settings.date;
|
|
var next = webix.Date.copy(now);
|
|
this._zoom_logic[this._zoom_level]._setContent(next, value);
|
|
|
|
var zoom = this._zoom_level-(this._fixed?0:1);
|
|
var prevZoom = this._zoom_level;
|
|
next = this._correctDate(next);
|
|
if(this._checkDate(next)){
|
|
this._changeZoomLevel(zoom, next);
|
|
var type = this._settings.type;
|
|
if(type == "month" && prevZoom !=2 || type == "year")
|
|
this._selectDate(next);
|
|
}
|
|
},
|
|
// selects date and redraw calendar
|
|
_selectDate: function(date){
|
|
if(this.callEvent("onBeforeDateSelect", [date])){
|
|
this.selectDate(date, true);
|
|
this.callEvent("onDateSelect", [date]); // should be deleted in a future version
|
|
this.callEvent("onAfterDateSelect", [date]);
|
|
}
|
|
},
|
|
on_click:{
|
|
webix_cal_prev_button: function(e, id, target){
|
|
this._changeDate(-1);
|
|
},
|
|
webix_cal_next_button: function(e, id, target){
|
|
this._changeDate(1);
|
|
},
|
|
webix_cal_day_disabled: function(){
|
|
return false;
|
|
},
|
|
webix_cal_outside: function(){
|
|
if(!this._settings.navigation)
|
|
return false;
|
|
},
|
|
webix_cal_day: function(e, id, target){
|
|
var cind = webix.html.index(target) - (this._settings.weekNumber?1:0);
|
|
var rind = webix.html.index(target.parentNode);
|
|
var date = webix.Date.add(this._getDateBoundaries()._start, cind + rind*7, "day", true);
|
|
if (this._settings.timepicker){
|
|
date.setHours(this._settings.date.getHours());
|
|
date.setMinutes(this._settings.date.getMinutes());
|
|
}
|
|
this._selectDate(date);
|
|
|
|
},
|
|
webix_cal_time:function(e){
|
|
if(this._zoom_logic[this._zoom_level-1]){
|
|
this._zoom_in = true;
|
|
var zoom = this._zoom_level - 1;
|
|
this._changeZoomLevel(zoom);
|
|
}
|
|
},
|
|
webix_cal_done:function(e){
|
|
var date = webix.Date.copy(this._settings.date);
|
|
date = this._correctDate(date);
|
|
this._selectDate(date);
|
|
},
|
|
webix_cal_month_name:function(e){
|
|
this._zoom_in = false;
|
|
//maximum zoom reached
|
|
if (this._zoom_level == 2 || !this._settings.monthSelect) return;
|
|
|
|
var zoom = Math.max(this._zoom_level, 0) + 1;
|
|
this._changeZoomLevel(zoom);
|
|
},
|
|
webix_cal_block:function(e, id, trg){
|
|
if(this._zoom_in){
|
|
|
|
if(trg.className.indexOf('webix_cal_day_disabled')!==-1)
|
|
return false;
|
|
var level = (trg.className.indexOf("webix_cal_block_min")!=-1?this._zoom_level-1:this._zoom_level);
|
|
var now = this._settings.date;
|
|
var next = webix.Date.copy(now);
|
|
this._zoom_logic[level]._setContent(next, trg.getAttribute("data-value")*1);
|
|
this._update_zoom_level(next);
|
|
}
|
|
else{
|
|
if(trg.className.indexOf('webix_cal_day_disabled')==-1)
|
|
this._mode_selected(trg.getAttribute("data-value")*1);
|
|
}
|
|
}
|
|
},
|
|
|
|
|
|
_string_to_date: function(date, format){
|
|
if (!date){
|
|
return webix.Date.datePart(new Date());
|
|
}
|
|
if(typeof date == "string"){
|
|
if (format)
|
|
date = webix.Date.strToDate(format)(date);
|
|
else
|
|
date=webix.i18n.parseFormatDate(date);
|
|
}
|
|
|
|
return date;
|
|
},
|
|
_checkDate: function(date){
|
|
var blockedDate = (this._settings.blockDates && this._settings.blockDates.call(this,date));
|
|
var minDate = this._settings.minDate;
|
|
var maxDate = this._settings.maxDate;
|
|
var outOfRange = (date < minDate || date > maxDate);
|
|
return !blockedDate &&!outOfRange;
|
|
},
|
|
showCalendar: function(date) {
|
|
date = this._string_to_date(date);
|
|
this._settings.date = date;
|
|
this.render();
|
|
this.resize();
|
|
},
|
|
getSelectedDate: function() {
|
|
return (this._selected_date)?webix.Date.copy(this._selected_date):this._selected_date;
|
|
|
|
},
|
|
getVisibleDate: function() {
|
|
return webix.Date.copy(this._settings.date);
|
|
},
|
|
setValue: function(date, format){
|
|
this.selectDate(date, true);
|
|
},
|
|
getValue: function(format){
|
|
var date = this.getSelectedDate();
|
|
if (format)
|
|
date = webix.Date.dateToStr(format)(date);
|
|
return date;
|
|
},
|
|
selectDate: function(date, show){
|
|
if(date){
|
|
date = this._string_to_date(date);
|
|
this._selected_date = date;
|
|
this._selected_date_part = webix.Date.datePart(webix.Date.copy(date));
|
|
}
|
|
else{ //deselect
|
|
this._selected_date = null;
|
|
this._selected_date_part = null;
|
|
if(this._settings.date){
|
|
webix.Date.datePart(this._settings.date);
|
|
}
|
|
}
|
|
|
|
if (show)
|
|
this.showCalendar(date);
|
|
else
|
|
this.render();
|
|
|
|
this.callEvent("onChange",[date]);
|
|
},
|
|
locate:function(){ return null; }
|
|
|
|
}, webix.MouseEvents, webix.ui.view, webix.EventSystem);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
webix.protoUI({
|
|
name:"property",
|
|
$init:function(){
|
|
this._contentobj.className+=" webix_property";
|
|
this._destroy_with_me = [];
|
|
},
|
|
defaults:{
|
|
nameWidth:100,
|
|
editable:true
|
|
},
|
|
on_render:{
|
|
checkbox:function(value, config){
|
|
return "<input type='checkbox' class='webix_property_check' "+(value?"checked":"")+">";
|
|
},
|
|
color:function(value, config){
|
|
return "<div class=\"webix_property_col_val\"><div class='webix_property_col_ind' style=\"background-color:"+(value||"#FFFFFF")+";\"></div><span>" +value+"</span></div>";
|
|
}
|
|
},
|
|
on_edit:{
|
|
label:false
|
|
},
|
|
_id:"webix_f_id",
|
|
on_click:{
|
|
webix_property_check:function(ev){
|
|
var id = this.locate(ev);
|
|
this.getItem(id).value = !this.getItem(id).value;
|
|
this.callEvent("onCheck",[id, this.getItem(id).value]);
|
|
return false;
|
|
}
|
|
},
|
|
on_dblclick:{
|
|
},
|
|
registerType:function(name, data){
|
|
if (data.template)
|
|
this.on_render[name] = data.template;
|
|
if (data.editor)
|
|
this.on_edit[name] = data.editor;
|
|
if (data.click)
|
|
for (var key in data.click)
|
|
this.on_click[key] = data.click[key];
|
|
},
|
|
elements_setter:function(data){
|
|
this._idToLine = {};
|
|
for(var i =0; i < data.length; i++){
|
|
var line = data[i];
|
|
if (line.type == "multiselect")
|
|
line.optionslist = true;
|
|
|
|
//line.type = line.type||"label";
|
|
line.id = line.id||webix.uid();
|
|
line.label = line.label||"";
|
|
line.value = line.value||"";
|
|
this._idToLine[line.id] = i;
|
|
this.template = this._map_options(data[i]);
|
|
}
|
|
return data;
|
|
},
|
|
showItem:function(id){
|
|
webix.RenderStack.showItem.call(this, id);
|
|
},
|
|
locate:function(e){
|
|
return webix.html.locate(arguments[0], this._id);
|
|
},
|
|
getItemNode:function(id){
|
|
return this._dataobj.childNodes[this._idToLine[id]];
|
|
},
|
|
getItem:function(id){
|
|
return this._settings.elements[this._idToLine[id]];
|
|
},
|
|
_get_editor_type:function(id){
|
|
var type = this.getItem(id).type;
|
|
if (type == "checkbox") return "inline-checkbox";
|
|
var alter_type = this.on_edit[type];
|
|
return (alter_type === false)?false:(alter_type||type);
|
|
},
|
|
_get_edit_config:function(id){
|
|
return this.getItem(id);
|
|
},
|
|
_find_cell_next:function(start, check , direction){
|
|
var row = this._idToLine[start.id];
|
|
var order = this._settings.elements;
|
|
|
|
if (direction){
|
|
for (var i=row+1; i<order.length; i++){
|
|
if (check.call(this, order[i].id))
|
|
return order[i].id;
|
|
}
|
|
} else {
|
|
for (var i=row-1; i>=0; i--){
|
|
if (check.call(this, order[i].id))
|
|
return order[i].id;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
},
|
|
updateItem:function(){
|
|
this.refresh();
|
|
},
|
|
_cellPosition:function(id){
|
|
var html = this.getItemNode(id);
|
|
return {
|
|
left:html.offsetLeft+this._settings.nameWidth,
|
|
top:html.offsetTop,
|
|
height:html.firstChild.offsetHeight,
|
|
width:this._data_width,
|
|
parent:this._contentobj
|
|
};
|
|
},
|
|
setValues:function(data, update){
|
|
if (this._settings.complexData)
|
|
data = webix.CodeParser.collapseNames(data);
|
|
|
|
if(!update) this._clear();
|
|
for(var key in data){
|
|
var line = this.getItem(key);
|
|
if (line)
|
|
line.value = data[key];
|
|
}
|
|
|
|
this._props_dataset = data;
|
|
this.refresh();
|
|
},
|
|
_clear:function(){
|
|
var lines = this._settings.elements;
|
|
for (var i=0; i<lines.length; i++)
|
|
lines[i].value = "";
|
|
},
|
|
getValues:function(){
|
|
var data = webix.clone(this._props_dataset||{});
|
|
for (var i = 0; i < this._settings.elements.length; i++) {
|
|
var line = this._settings.elements[i];
|
|
if (line.type != "label")
|
|
data[line.id] = line.value;
|
|
}
|
|
|
|
if (this._settings.complexData)
|
|
data = webix.CodeParser.expandNames(data);
|
|
|
|
return data;
|
|
},
|
|
refresh:function(){
|
|
this.render();
|
|
},
|
|
$setSize:function(x,y){
|
|
if (webix.ui.view.prototype.$setSize.call(this, x, y)){
|
|
this._data_width = this._content_width - this._settings.nameWidth;
|
|
this.render();
|
|
}
|
|
},
|
|
$getSize:function(dx,dy){
|
|
if (this._settings.autoheight){
|
|
var count = this._settings.elements.length;
|
|
this._settings.height = Math.max(this.type.height * count,this._settings.minHeight||0);
|
|
}
|
|
return webix.ui.view.prototype.$getSize.call(this, dx, dy);
|
|
},
|
|
_toHTML:function(){
|
|
var html = [];
|
|
var els = this._settings.elements;
|
|
if (els)
|
|
for (var i=0; i<els.length; i++){
|
|
var data = els[i];
|
|
if (data.css && typeof data.css == "object")
|
|
data.css = webix.html.createCss(data.css);
|
|
|
|
var pre = '<div webix_f_id="'+data.id+'" class="webix_property_line '+(data.css||'')+'">';
|
|
if (data.type == "label")
|
|
html[i] = pre+"<div class='webix_property_label_line'>"+data.label+"</div></div>";
|
|
else {
|
|
var render = this.on_render[data.type],
|
|
content;
|
|
var post = "<div class='webix_property_label' style='width:"+this._settings.nameWidth+"px'>"+data.label+"</div><div class='webix_property_value' style='width:"+this._data_width+"px'>";
|
|
if(data.collection || data.options){
|
|
content = data.template(data, data.value);
|
|
}else if(data.format)
|
|
content = data.format(data.value);
|
|
else
|
|
content = data.value;
|
|
if (render)
|
|
content = render.call(this, data.value, data);
|
|
html[i] = pre+post+content+"</div></div>";
|
|
}
|
|
}
|
|
return html.join("");
|
|
},
|
|
type:{
|
|
height:24,
|
|
templateStart:webix.template(""),
|
|
templateEnd:webix.template("</div>")
|
|
},
|
|
$skin: function(){
|
|
this.type.height = webix.skin.$active.propertyItemHeight||24;
|
|
}
|
|
}, webix.AutoTooltip, webix.EditAbility, webix.MapCollection, webix.MouseEvents, webix.Scrollable, webix.SingleRender, webix.AtomDataLoader, webix.EventSystem, webix.ui.view);
|
|
|
|
|
|
|
|
|
|
|
|
webix.protoUI({
|
|
name:"colorboard",
|
|
defaults:{
|
|
template:"<div style=\"width:100%;height:100%;background-color:{obj.val}\"></div>",
|
|
palette:null,
|
|
height:220,
|
|
width:220,
|
|
cols:12,
|
|
rows:10,
|
|
minLightness:0.15,
|
|
maxLightness:1
|
|
},
|
|
$init:function(config){
|
|
webix.event(this._viewobj, "click", webix.bind(function(e){
|
|
var value = webix.html.locate(e, "webix_val");
|
|
this.setValue(value);
|
|
this.callEvent("onSelect", [this._settings.value, e]);
|
|
}, this));
|
|
},
|
|
_findIndex:function(value){
|
|
var pal = this._settings.palette;
|
|
value = value.toUpperCase();
|
|
for(var r= 0, rows= pal.length; r < rows; r++)
|
|
for(var c= 0, cols = pal[r].length; c < cols; c++){
|
|
if(pal[r][c].toUpperCase() == value){
|
|
return {row:r, col:c};
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
$setSize:function(x,y){
|
|
if(webix.ui.view.prototype.$setSize.call(this,x,y)){
|
|
this.render();
|
|
}
|
|
},
|
|
getValue:function(){
|
|
return this._settings.value;
|
|
},
|
|
_getBox:function(){
|
|
return this._viewobj.firstChild;
|
|
},
|
|
setValue:function(value){
|
|
if(!value)
|
|
return;
|
|
if(value.charAt(0) != "#")
|
|
value = '#' + value;
|
|
|
|
this._settings.value = value;
|
|
this.$setValue(value);
|
|
|
|
return value;
|
|
},
|
|
_selectBox:null,
|
|
_getSelectBox:function(){
|
|
if( this._selectBox && this._selectBox.parentNode ){
|
|
return this._selectBox;
|
|
}else{
|
|
var div = this._selectBox = document.createElement("div");
|
|
div.className = "webix_color_selector";
|
|
this._viewobj.lastChild.appendChild(div);
|
|
return div;
|
|
}
|
|
},
|
|
$setValue:function(value){
|
|
if(this.isVisible(this._settings.id)){
|
|
var cell, div, ind, parent, style,
|
|
left = 0, top = 0;
|
|
|
|
ind = this._findIndex(value);
|
|
if(ind){
|
|
cell = this._viewobj.lastChild.childNodes[ind.row].childNodes[ind.col];
|
|
}
|
|
|
|
|
|
if(cell && cell.parentNode && cell.parentNode.parentNode){
|
|
parent = cell.parentNode;
|
|
left = cell.offsetLeft - parent.offsetLeft ;
|
|
top = - (this.$height - (cell.offsetTop -parent.parentNode.offsetTop )) ;
|
|
}else{
|
|
if (this._selectBox)
|
|
this._selectBox.style.left = "-100px";
|
|
return;
|
|
}
|
|
|
|
div = this._getSelectBox();
|
|
style = [
|
|
"left:" + left + "px",
|
|
"top:" + top+"px",
|
|
"width:" + cell.style.width,
|
|
"height:" + cell.style.height
|
|
].join(";");
|
|
|
|
if( typeof( div.style.cssText ) !== 'undefined' ) {
|
|
div.style.cssText = style;
|
|
} else {
|
|
div.setAttribute('style',style);
|
|
}
|
|
}
|
|
},
|
|
|
|
|
|
_initPalette:function(config){
|
|
function numToHex(n){
|
|
return webix.color.toHex(n, 2);
|
|
}
|
|
function rgbToHex(r,g,b){
|
|
return "#"+numToHex( Math.floor(r)) +numToHex( Math.floor(g)) + numToHex(Math.floor(b));
|
|
}
|
|
function hslToRgb(h, s, l){
|
|
var r, g, b;
|
|
if(!s){
|
|
r = g = b = l; // achromatic
|
|
}else{
|
|
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
|
var p = 2 * l - q;
|
|
r = hue2rgb(p, q, h + 1/3);
|
|
g = hue2rgb(p, q, h);
|
|
b = hue2rgb(p, q, h - 1/3);
|
|
}
|
|
|
|
return {r:r * 255, g:g * 255, b:b * 255};
|
|
}
|
|
function hue2rgb(p, q, t){
|
|
if(t < 0) t += 1;
|
|
if(t > 1) t -= 1;
|
|
if (t < 1/6)
|
|
return p + (q - p) * 6 * t;
|
|
else if (t <= 1/2)
|
|
return q;
|
|
else if (t < 2/3)
|
|
return p + (q - p) * (2/3 - t) * 6;
|
|
else
|
|
return p;
|
|
}
|
|
|
|
function renderGrayBar(colCount){
|
|
var gray = [],
|
|
val = 255,
|
|
step = val / colCount;
|
|
|
|
for(var i=0; i < colCount; i++){
|
|
val = Math.round(val > 0 ? val : 0);
|
|
gray.push(rgbToHex(val, val, val));
|
|
val -= step;
|
|
}
|
|
gray[gray.length - 1] = "#000000";
|
|
return gray;
|
|
}
|
|
|
|
var colors = [];
|
|
var colorRows = config.rows - 1;
|
|
var colorStep = 1/config.cols;
|
|
var lightStep = (config.maxLightness - config.minLightness)/colorRows;
|
|
var colorRange = null;
|
|
|
|
colors.push(renderGrayBar(config.cols));
|
|
|
|
for(var step = 0, lt = config.minLightness; step < colorRows; step++){
|
|
colorRange = [];
|
|
for(var c = 0, col = 0; c < config.cols; c++ ){
|
|
var val = hslToRgb(col, 1, lt );
|
|
colorRange.push(rgbToHex(val.r, val.g, val.b));
|
|
col += colorStep;
|
|
}
|
|
colors.push(colorRange);
|
|
lt+=lightStep;
|
|
}
|
|
|
|
this._settings.palette = colors;
|
|
},
|
|
|
|
|
|
render:function(){
|
|
if(!this.isVisible(this._settings.id))
|
|
return;
|
|
|
|
if(!this._settings.palette)
|
|
this._initPalette(this._settings);
|
|
var palette = this._settings.palette;
|
|
|
|
this.callEvent("onBeforeRender",[]);
|
|
var config = this._settings,
|
|
itemTpl = webix.template("<div style=\"width:{obj.width}px;height:{obj.height}px;\" webix_val=\"{obj.val}\">" + (config.template||"") + "</div>"),
|
|
data = {width: 0, height:0, val:0},
|
|
width = this.$width,
|
|
height = this.$height,
|
|
widths = [];
|
|
|
|
var html = "<div class=\"webix_color_palette\">";
|
|
|
|
var firstRow = (typeof palette[0] == "object") ? palette[0] : palette;
|
|
for(var i=0; i < firstRow.length; i++){
|
|
widths[i] = Math.floor(width/(firstRow.length - i));
|
|
width -= widths[i];
|
|
}
|
|
|
|
if(typeof palette[0] == "object"){
|
|
for(var r=0; r < palette.length; r++){
|
|
var cellHeight = Math.floor(height/(palette.length - r));
|
|
height -= cellHeight;
|
|
var row = palette[r];
|
|
html += renderRow(row, widths, cellHeight);
|
|
}
|
|
}else{
|
|
html+= renderRow(palette, widths, height);
|
|
}
|
|
|
|
html += "</div>";
|
|
this._viewobj.innerHTML = html;
|
|
|
|
function renderRow(row, widths, height){
|
|
var rowHtml = "<div class=\"webix_color_row\">";
|
|
for(var cell = 0; cell < row.length; cell++){
|
|
data.width = widths[cell];
|
|
data.height = height;
|
|
data.val = row[cell];
|
|
rowHtml += itemTpl(data);
|
|
}
|
|
rowHtml += "</div>";
|
|
return rowHtml;
|
|
}
|
|
this._selectBox = null;
|
|
if(this._settings.value)
|
|
this.$setValue(this._settings.value);
|
|
this.callEvent("onAfterRender",[]);
|
|
},
|
|
refresh:function(){ this.render(); }
|
|
}, webix.ui.view, webix.EventSystem);
|
|
|
|
|
|
webix.protoUI({
|
|
name:"resizer",
|
|
defaults:{
|
|
width:7, height:7
|
|
},
|
|
$init:function(config){
|
|
webix.assert(this.getParentView(), "Resizer can't be initialized outside a layout");
|
|
this._viewobj.className += " webix_resizer";
|
|
var space = this.getParentView()._margin;
|
|
|
|
webix.event(this._viewobj, webix.env.mouse.down, this._rsDown, {bind:this});
|
|
webix.event(document.body, webix.env.mouse.up, this._rsUp, {bind:this});
|
|
|
|
var dir = this._getResizeDir();
|
|
|
|
this._rs_started = false;
|
|
this._resizer_dir = dir;
|
|
|
|
this._resizer_dim = (dir=="x"?"width":"height");
|
|
|
|
if (dir=="x")
|
|
config.height = 0;
|
|
else
|
|
config.width = 0;
|
|
|
|
if (space>0){
|
|
this._viewobj.className += " webix_resizer_v"+dir;
|
|
this._viewobj.style.marginRight = "-"+space+"px";
|
|
if (dir == "x")
|
|
config.width = space;
|
|
else
|
|
config.height = space;
|
|
this.$nospace = true;
|
|
} else
|
|
this._viewobj.className += " webix_resizer_"+dir;
|
|
|
|
this._viewobj.innerHTML = "<div class='webix_resizer_content'></div>";
|
|
if (dir == "y" && space>0) this._viewobj.style.marginBottom = "-"+(config.height||this.defaults.height)+"px";
|
|
},
|
|
_rsDown:function(e){
|
|
var cells = this._getResizerCells();
|
|
//some sibling can block resize
|
|
if(cells && !this._settings.disabled){
|
|
e = e||event;
|
|
this._rs_started = true;
|
|
this._rs_process = webix.html.pos(e);
|
|
this._rsLimit = [];
|
|
this._rsStart(e, cells[0]);
|
|
}
|
|
},
|
|
_rsUp:function(){
|
|
this._rs_started = false;
|
|
this._rs_process = false;
|
|
},
|
|
_rsStart:function(e, cell){
|
|
var dir,offset, pos,posParent,start;
|
|
e = e||event;
|
|
dir = this._resizer_dir;
|
|
|
|
/*layout position:relative to place absolutely positioned elements in it*/
|
|
this.getParentView()._viewobj.style.position = "relative";
|
|
pos = webix.html.offset(this._viewobj);
|
|
posParent = webix.html.offset(this.getParentView()._viewobj);
|
|
start = pos[dir]-posParent[dir];
|
|
offset = webix.html.offset(cell.$view)[dir]- webix.html.offset(this.getParentView().$view)[dir];
|
|
|
|
this._rs_progress = [dir,cell, start, offset];
|
|
/*resizer stick (resizerea ext)*/
|
|
|
|
this._resizeStick = new webix.ui.resizearea({
|
|
container:this.getParentView()._viewobj,
|
|
dir:dir,
|
|
eventPos:this._rs_process[dir],
|
|
start:start-1,
|
|
height: this.$height,
|
|
width: this.$width,
|
|
border: 1,
|
|
margin: this.getParentView()["_padding"+dir.toUpperCase()]
|
|
});
|
|
|
|
/*stops resizing on stick mouseup*/
|
|
this._resizeStick.attachEvent("onResizeEnd", webix.bind(this._rsEnd, this));
|
|
/*needed to stop stick moving when the limit for dimension is reached*/
|
|
this._resizeStick.attachEvent("onResize", webix.bind(this._rsResizeHandler, this));
|
|
|
|
webix.html.addCss(document.body,"webix_noselect",1);
|
|
},
|
|
_getResizeDir: function(){
|
|
return this.getParentView()._vertical_orientation?"y":"x";
|
|
},
|
|
_rsResizeHandler:function(){
|
|
var cells,config,cDiff,diff,dir,i,limits,limitSizes,sizes,totalSize;
|
|
if(this._rs_progress){
|
|
cells = this._getResizerCells();
|
|
dir = this._rs_progress[0];
|
|
/*vector distance between resizer and stick*/
|
|
diff = this._resizeStick._last_result -this._rs_progress[2];
|
|
/*new sizes for the resized cells, taking into account the stick position*/
|
|
sizes = this._rsGetDiffCellSizes(cells,dir,diff);
|
|
/*sum of cells dimensions*/
|
|
totalSize = cells[0]["$"+this._resizer_dim]+cells[1]["$"+this._resizer_dim];
|
|
/*max and min limits if they're set*/
|
|
limits = (dir=="y"?["minHeight","maxHeight"]:["minWidth","maxWidth"]);
|
|
for(i=0;i<2;i++){
|
|
config = cells[i]._settings;
|
|
cDiff = (i?-diff:diff);/*if cDiff is positive, the size of i cell is increased*/
|
|
/*if size is bigger than max limit or size is smaller than min limit*/
|
|
var min = config[limits[0]];
|
|
var max = config[limits[1]];
|
|
|
|
if(cDiff>0&&max&&max<=sizes[i] || cDiff<0&&(min||3)>=sizes[i]){
|
|
this._rsLimit[i] = (cDiff>0?max:(min||3));
|
|
/*new sizes, taking into account max and min limits*/
|
|
limitSizes = this._rsGetLimitCellSizes(cells,dir);
|
|
/*stick position*/
|
|
this._resizeStick._dragobj.style[(dir=="y"?"top":"left")] = this._rs_progress[3] + limitSizes[0]+"px";
|
|
return;
|
|
}else if(sizes[i]<3){/*cells size can not be less than 1*/
|
|
this._resizeStick._dragobj.style[(dir=="y"?"top":"left")] = this._rs_progress[3] + i*totalSize+1+"px";
|
|
}else{
|
|
this._rsLimit[i] = null;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
_getResizerCells:function(){
|
|
var cells,i;
|
|
cells = this.getParentView()._cells;
|
|
for(i=0; i< cells.length;i++){
|
|
if(cells[i]==this){
|
|
if (!cells[i-1] || cells[i-1]._settings.$noresize) return null;
|
|
if (!cells[i+1] || cells[i+1]._settings.$noresize) return null;
|
|
return [cells[i-1],cells[i+1]];
|
|
}
|
|
}
|
|
},
|
|
_rsEnd:function(result){
|
|
if (typeof result == "undefined") return;
|
|
|
|
var cells,dir,diff,i,size;
|
|
var vertical = this.getParentView()._vertical_orientation;
|
|
this._resizerStick = null;
|
|
if (this._rs_progress){
|
|
dir = this._rs_progress[0];
|
|
diff = result-this._rs_progress[2];
|
|
cells = this._getResizerCells();
|
|
if(cells[0]&&cells[1]){
|
|
/*new cell sizes*/
|
|
size = this._rsGetCellSizes(cells,dir,diff);
|
|
|
|
for (var i=0; i<2; i++){
|
|
//cell has not fixed size, of fully fixed layout
|
|
var cell_size = cells[i].$getSize(0,0);
|
|
if (vertical?(cell_size[2] == cell_size[3]):(Math.abs(cell_size[1]-cell_size[0])<3)){
|
|
/*set fixed sizes for both cells*/
|
|
cells[i]._settings[this._resizer_dim]=size[i];
|
|
if (cells[i]._bubble_size)
|
|
cells[i]._bubble_size(this._resizer_dim, size[i], vertical);
|
|
} else {
|
|
var actualSize = cells[i].$view[vertical?"offsetHeight":"offsetWidth"];//cells[i]["$"+this._resizer_dim];
|
|
cells[i]._settings.gravity = size[i]/actualSize*cells[i]._settings.gravity;
|
|
}
|
|
}
|
|
|
|
cells[0].resize();
|
|
|
|
for (var i = 0; i < 2; i++)
|
|
if (cells[i].callEvent)
|
|
cells[i].callEvent("onViewResize",[]);
|
|
webix.callEvent("onLayoutResize", [cells]);
|
|
}
|
|
this._rs_progress = false;
|
|
}
|
|
this._rs_progress = false;
|
|
this._rs_started = false;
|
|
this._rsLimit = null;
|
|
webix.html.removeCss(document.body,"webix_noselect");
|
|
},
|
|
_rsGetLimitCellSizes: function(cells){
|
|
var size1,size2,totalSize;
|
|
totalSize = cells[0]["$"+this._resizer_dim]+cells[1]["$"+this._resizer_dim];
|
|
if(this._rsLimit[0]){
|
|
size1 = this._rsLimit[0];
|
|
size2 = totalSize-size1;
|
|
}
|
|
else if(this._rsLimit[1]){
|
|
size2 = this._rsLimit[1];
|
|
size1 = totalSize-size2;
|
|
}
|
|
return [size1,size2];
|
|
},
|
|
_rsGetDiffCellSizes:function(cells,dir,diff){
|
|
var sizes =[];
|
|
var styleDim = this._resizer_dim=="height"?"offsetHeight":"offsetWidth";
|
|
for(var i=0;i<2;i++)
|
|
sizes[i] = cells[i].$view[styleDim]+(i?-1:1)*diff;
|
|
return sizes;
|
|
},
|
|
_rsGetCellSizes:function(cells,dir,diff){
|
|
var i,sizes,totalSize;
|
|
/*if max or min dimentsions are set*/
|
|
if(this._rsLimit[0]||this._rsLimit[1]){
|
|
sizes = this._rsGetLimitCellSizes(cells,dir);
|
|
}
|
|
else{
|
|
sizes = this._rsGetDiffCellSizes(cells,dir,diff);
|
|
for(i =0; i<2;i++ ){
|
|
/*if stick moving is stopped outsize cells borders*/
|
|
if(sizes[i]<0){
|
|
totalSize = sizes[0]+sizes[1];
|
|
sizes[i] =1;
|
|
sizes[1-i] = totalSize-1;
|
|
}
|
|
}
|
|
|
|
}
|
|
return sizes;
|
|
}
|
|
}, webix.MouseEvents, webix.ui.view);
|
|
|
|
|
|
|
|
webix.protoUI({
|
|
name:"multiview",
|
|
defaults:{
|
|
animate:{
|
|
}
|
|
},
|
|
setValue:function(val){
|
|
webix.$$(val).show();
|
|
},
|
|
getValue:function(){
|
|
return this.getActiveId();
|
|
},
|
|
$init:function(){
|
|
this._active_cell = 0;
|
|
this._vertical_orientation = 1;
|
|
this._viewobj.style.position = "relative";
|
|
this._viewobj.className += " webix_multiview";
|
|
this._back_queue = [];
|
|
},
|
|
_ask_render:function(cell_id, view_id){
|
|
var cell = webix.$$(cell_id);
|
|
if (!cell._render_hash){
|
|
cell._render_queue = [];
|
|
cell._render_hash = {};
|
|
}
|
|
if (!cell._render_hash[view_id]){
|
|
cell._render_hash[view_id]=true;
|
|
cell._render_queue.push(view_id);
|
|
}
|
|
},
|
|
_render_activation:function(cell_id){
|
|
var cell = webix.$$(cell_id);
|
|
if(this._settings.keepViews)
|
|
cell._viewobj.style.display = "";
|
|
/*back array*/
|
|
if(this._back_queue[this._back_queue.length-2]!=cell_id){
|
|
if(this._back_queue.length==10)
|
|
this._back_queue.splice(0,1);
|
|
this._back_queue.push(cell_id);
|
|
}
|
|
else
|
|
this._back_queue.splice(this._back_queue.length-1,1);
|
|
|
|
if (cell._render_hash){
|
|
for (var i=0; i < cell._render_queue.length; i++)
|
|
webix.$$(cell._render_queue[i]).render();
|
|
|
|
cell._render_queue = [];
|
|
cell._render_hash = {};
|
|
}
|
|
},
|
|
addView:function(){
|
|
var id = webix.ui.baselayout.prototype.addView.apply(this, arguments);
|
|
if(this._settings.keepViews)
|
|
webix.$$(id)._viewobj.style.display = "none";
|
|
else
|
|
webix.html.remove(webix.$$(id)._viewobj);
|
|
return id;
|
|
},
|
|
_beforeRemoveView:function(index, view){
|
|
//removing current view
|
|
if (index == this._active_cell){
|
|
var next = Math.max(index-1, 1);
|
|
if (this._cells[next])
|
|
this._show(this._cells[next], false);
|
|
}
|
|
|
|
if (index < this._active_cell)
|
|
this._active_cell--;
|
|
},
|
|
//necessary, as we want to ignore hide calls for elements in multiview
|
|
_hide:function(){},
|
|
_parse_cells:function(collection){
|
|
collection = collection || this._collection;
|
|
|
|
for (var i=0; i < collection.length; i++)
|
|
collection[i]._inner = this._settings.borderless?{top:1, left:1, right:1, bottom:1}:(this._settings._inner||{});
|
|
|
|
webix.ui.baselayout.prototype._parse_cells.call(this, collection);
|
|
|
|
for (var i=1; i < this._cells.length; i++){
|
|
if(this._settings.keepViews)
|
|
this._cells[i]._viewobj.style.display = "none";
|
|
else
|
|
webix.html.remove(this._cells[i]._viewobj);
|
|
}
|
|
|
|
|
|
for (var i=0; i<collection.length; i++){
|
|
var cell = this._cells[i];
|
|
if (cell._cells && !cell._render_borders) continue;
|
|
|
|
var _inner = cell._settings._inner;
|
|
if (_inner.top)
|
|
cell._viewobj.style.borderTopWidth="0px";
|
|
if (_inner.left)
|
|
cell._viewobj.style.borderLeftWidth="0px";
|
|
if (_inner.right)
|
|
cell._viewobj.style.borderRightWidth="0px";
|
|
if (_inner.bottom)
|
|
cell._viewobj.style.borderBottomWidth="0px";
|
|
}
|
|
this._render_activation(this.getActiveId());
|
|
},
|
|
cells_setter:function(value){
|
|
webix.assert(value && value.length,"Multiview must have at least one view in 'cells'");
|
|
this._collection = value;
|
|
},
|
|
_getDirection:function(next, active){
|
|
var dir = (this._settings.animate || {}).direction;
|
|
var vx = (dir == "top" || dir == "bottom");
|
|
return next < active ? (vx?"bottom":"right"):(vx?"top":"left");
|
|
},
|
|
_show:function(obj, animation_options){
|
|
|
|
var parent = this.getParentView();
|
|
if (parent && parent.getTabbar)
|
|
parent.getTabbar().setValue(obj._settings.$id || obj._settings.id);
|
|
|
|
if (this._in_animation)
|
|
return webix.delay(this._show, this,[obj, animation_options],100);
|
|
|
|
var _next_cell = -1;
|
|
for (var i=0; i < this._cells.length; i++)
|
|
if (this._cells[i]==obj){
|
|
_next_cell = i;
|
|
break;
|
|
}
|
|
if (_next_cell < 0 || _next_cell == this._active_cell)
|
|
return;
|
|
|
|
|
|
var prev = this._cells[this._active_cell];
|
|
var next = this._cells[ _next_cell ];
|
|
var size = prev.$getSize(0,0);
|
|
|
|
//need to be moved in animate
|
|
if((animation_options||typeof animation_options=="undefined")&&webix.animate.isSupported() && this._settings.animate) {
|
|
var aniset = webix.extend({}, this._settings.animate);
|
|
if(this._settings.keepViews)
|
|
aniset.keepViews = true;
|
|
aniset.direction = this._getDirection(_next_cell,this._active_cell);
|
|
aniset = webix.Settings._mergeSettings(animation_options||{}, aniset);
|
|
|
|
var line = webix.animate.formLine(
|
|
next._viewobj,
|
|
prev._viewobj,
|
|
aniset);
|
|
next.$getSize(0,0);
|
|
next.$setSize(this._content_width,this._content_height);
|
|
|
|
var callback_original = aniset.callback;
|
|
aniset.callback = function(){
|
|
webix.animate.breakLine(line,this._settings.keepViews);
|
|
this._in_animation = false;
|
|
if (callback_original) callback_original.call(this);
|
|
callback_original = aniset.master = aniset.callback = null;
|
|
this.resize();
|
|
};
|
|
aniset.master = this;
|
|
|
|
this._active_cell = _next_cell;
|
|
this._render_activation(this.getActiveId());
|
|
|
|
webix.animate(line, aniset);
|
|
this._in_animation = true;
|
|
}
|
|
else { // browsers which don't support transform and transition
|
|
if(this._settings.keepViews){
|
|
prev._viewobj.style.display = "none";
|
|
}
|
|
else{
|
|
webix.html.remove(prev._viewobj);
|
|
this._viewobj.appendChild(this._cells[i]._viewobj);
|
|
}
|
|
|
|
this._active_cell = _next_cell;
|
|
|
|
prev.resize();
|
|
this._render_activation(this.getActiveId());
|
|
}
|
|
|
|
if (next.callEvent){
|
|
next.callEvent("onViewShow",[]);
|
|
webix.ui.each(next, this._signal_hidden_cells);
|
|
}
|
|
|
|
this.callEvent("onViewChange",[prev._settings.id, next._settings.id]);
|
|
|
|
},
|
|
$getSize:function(dx, dy){
|
|
webix.debug_size_box_start(this, true);
|
|
|
|
var size = this._cells[this._active_cell].$getSize(0, 0);
|
|
if (this._settings.fitBiggest){
|
|
for (var i=0; i<this._cells.length; i++)
|
|
if (i != this._active_cell){
|
|
var other = this._cells[i].$getSize(0, 0);
|
|
for (var j = 0; j < 4; j++)
|
|
size[j] = Math.max(size[j], other[j]);
|
|
}
|
|
}
|
|
|
|
|
|
//get layout sizes
|
|
var self_size = webix.ui.baseview.prototype.$getSize.call(this, 0, 0);
|
|
//use child settings if layout's one was not defined
|
|
if (self_size[1] >= 100000) self_size[1]=0;
|
|
if (self_size[3] >= 100000) self_size[3]=0;
|
|
|
|
self_size[0] = (self_size[0] || size[0] ) +dx;
|
|
self_size[1] = (self_size[1] || size[1] ) +dx;
|
|
self_size[2] = (self_size[2] || size[2] ) +dy;
|
|
self_size[3] = (self_size[3] || size[3] ) +dy;
|
|
|
|
webix.debug_size_box_end(this, self_size);
|
|
|
|
return self_size;
|
|
},
|
|
$setSize:function(x,y){
|
|
this._layout_sizes = [x,y];
|
|
webix.ui.baseview.prototype.$setSize.call(this,x,y);
|
|
this._cells[this._active_cell].$setSize(x,y);
|
|
},
|
|
isVisible:function(base_id, cell_id){
|
|
if (cell_id && cell_id != this.getActiveId()){
|
|
if (base_id)
|
|
this._ask_render(cell_id, base_id);
|
|
return false;
|
|
}
|
|
return webix.ui.view.prototype.isVisible.call(this, base_id, this._settings.id);
|
|
},
|
|
getActiveId:function(){
|
|
return this._cells.length?this._cells[this._active_cell]._settings.id:null;
|
|
},
|
|
back:function(step){
|
|
step=step||1;
|
|
if(this.callEvent("onBeforeBack",[this.getActiveId(), step])){
|
|
if(this._back_queue.length>step){
|
|
var viewId = this._back_queue[this._back_queue.length-step-1];
|
|
webix.$$(viewId).show();
|
|
return viewId;
|
|
}
|
|
return null;
|
|
}
|
|
return null;
|
|
|
|
}
|
|
},webix.ui.baselayout);
|
|
|
|
|
|
|
|
|
|
|
|
webix.protoUI({
|
|
name:"form",
|
|
defaults:{
|
|
type:"form",
|
|
autoheight:true
|
|
},
|
|
_default_height:-1,
|
|
_form_classname:"webix_form",
|
|
_form_vertical:true,
|
|
$getSize:function(dx, dy){
|
|
if (this._scroll_y && !this._settings.width) dx += webix.ui.scrollSize;
|
|
|
|
var sizes = webix.ui.layout.prototype.$getSize.call(this, dx, dy);
|
|
|
|
if (this._settings.scroll || !this._settings.autoheight){
|
|
sizes[2] = this._settings.height || this._settings.minHeight || 0;
|
|
sizes[3] += 100000;
|
|
}
|
|
|
|
return sizes;
|
|
}
|
|
}, webix.ui.toolbar);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
webix.protoUI({
|
|
name:"menu",
|
|
_listClassName:"webix_menu",
|
|
$init:function(config){
|
|
if (config.autowidth){
|
|
this._autowidth_submenu = true;
|
|
delete config.autowidth;
|
|
}
|
|
|
|
this.data.attachEvent('onStoreUpdated', webix.bind(function(){
|
|
this._hide_sub_menu();
|
|
},this));
|
|
this.attachEvent('onMouseMove', this._mouse_move_menu);
|
|
this.attachEvent('onMouseOut',function(){
|
|
if (this._menu_was_activated() && this._settings.openAction == "click") return;
|
|
if (!this._child_menu_active)
|
|
this._hide_sub_menu();
|
|
});
|
|
this.attachEvent('onItemClick', function(id, e, trg){
|
|
var item = this.getItem(id);
|
|
if (item){
|
|
if (item.$template) return;
|
|
|
|
var parent = this.getTopMenu();
|
|
|
|
//ignore disabled items
|
|
if (!this.data.getMark(id, "webix_disabled")){
|
|
if (!parent.callEvent("onMenuItemClick", [id, e, trg])){
|
|
e.showpopup = true;
|
|
return;
|
|
}
|
|
|
|
if (this != parent)
|
|
parent._call_onclick(id,e,trg);
|
|
|
|
//click on group - do not close submenus
|
|
if (!item.submenu){
|
|
parent._hide_sub_menu(true);
|
|
if (parent._hide_on_item_click)
|
|
parent.hide();
|
|
} else {
|
|
if ((this === parent || webix.env.touch ) && parent._settings.openAction == "click"){
|
|
this._mouse_move_activation(id, trg);
|
|
}
|
|
|
|
//do not close popups when clicking on menu folder
|
|
e.showpopup = true;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
this.data.attachEvent("onClearAll", function(){
|
|
this._hidden_items = [];
|
|
});
|
|
this.data._hidden_items = [];
|
|
},
|
|
sizeToContent:function(){
|
|
if (this._settings.layout == "y"){
|
|
var texts = [];
|
|
this.data.each(function(obj){
|
|
texts.push(this._toHTML(obj));
|
|
}, this);
|
|
|
|
this.config.width = webix.html.getTextSize(texts, this.$view.className).width+20;
|
|
this.resize();
|
|
} else webix.assert(false, "sizeToContent will work for vertical menu only");
|
|
},
|
|
getTopMenu:function(){
|
|
var parent = this;
|
|
while (parent._parent_menu)
|
|
parent = webix.$$(parent._parent_menu);
|
|
return parent;
|
|
},
|
|
_auto_height_calc:function(count){
|
|
if (this._settings.autoheight) count = this.count();
|
|
|
|
var height = 0;
|
|
for (var i=0; i<count; i++){
|
|
var item = this.data.pull[this.data.order[i]];
|
|
if (item && item.$template == "Separator")
|
|
height+=4;
|
|
else
|
|
height+=this.type.height;
|
|
}
|
|
return height;
|
|
},
|
|
on_mouse_move:{},
|
|
type:{
|
|
css:"menu",
|
|
width:"auto",
|
|
templateStart:function(obj, common, mark){
|
|
if (obj.$template === "Separator" || obj.$template === "Spacer"){
|
|
return '<div webix_l_id="#id#" class="webix_context_'+obj.$template.toLowerCase()+'">';
|
|
}
|
|
var link = (obj.href?" href='"+obj.href+"' ":"")+(obj.target?" target='"+obj.target+"' ":"");
|
|
return webix.ui.list.prototype.type.templateStart(obj,common,mark).replace(/^<div/,"<a "+link)+((obj.submenu && common.subsign)?"<div class='webix_submenu_icon'></div>":"");
|
|
},
|
|
templateEnd: function(obj, common, mark){
|
|
return (obj.$template === "Separator" || obj.$template === "Spacer")?"</div>":"</a>";
|
|
},
|
|
templateSeparator:webix.template("<div class='sep_line'></div>"),
|
|
templateSpacer:webix.template("<div></div>")
|
|
},
|
|
getMenu: function(id){
|
|
if (!this.data.pull[id]){
|
|
for (var subid in this.data.pull){
|
|
var obj = this.getItem(subid);
|
|
if (obj.submenu){
|
|
var search = this._get_submenu(obj).getMenu(id);
|
|
if (search) return search;
|
|
}
|
|
}
|
|
} else return this;
|
|
},
|
|
getSubMenu:function(id){
|
|
var menu = this.getMenu(id);
|
|
var obj = menu.getItem(id);
|
|
return (obj.submenu?menu._get_submenu(obj):null);
|
|
},
|
|
getMenuItem:function(id){
|
|
return this.getMenu(id).getItem(id);
|
|
},
|
|
_get_submenu:function(data){
|
|
var sub = webix.$$(data.submenu);
|
|
if (!sub){
|
|
data.submenu = this._create_sub_menu(data);
|
|
sub = webix.$$(data.submenu);
|
|
}
|
|
return sub;
|
|
},
|
|
_mouse_move_menu:function(id, e, target){
|
|
if (!this._menu_was_activated())
|
|
return;
|
|
|
|
this._mouse_move_activation(id, target);
|
|
},
|
|
_menu_was_activated:function(){
|
|
var top = this.getTopMenu();
|
|
if (top._settings.openAction == "click"){
|
|
if (webix.env.touch) return false;
|
|
var sub = top._open_sub_menu;
|
|
if (sub && webix.$$(sub).isVisible())
|
|
return true;
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
_mouse_move_activation:function(id, target){
|
|
var data = this.getItem(id);
|
|
if (!data) return;
|
|
|
|
//clear flag of submenu usage
|
|
this._child_menu_active = null;
|
|
|
|
//hide previously opened sub-menu
|
|
if (this._open_sub_menu && data.submenu != this._open_sub_menu)
|
|
this._hide_sub_menu(true);
|
|
|
|
//show submenu
|
|
if (data.submenu&&!this.config.hidden){
|
|
|
|
var sub = this._get_submenu(data);
|
|
if(this.data.getMark(id,"webix_disabled"))
|
|
return;
|
|
|
|
if (this.getTopMenu()._autowidth_submenu && sub.sizeToContent && !sub.isVisible())
|
|
sub.sizeToContent();
|
|
sub.show(target,{ pos:this._settings.subMenuPos });
|
|
|
|
sub._parent_menu = this._settings.id;
|
|
|
|
this._open_sub_menu = data.submenu;
|
|
}
|
|
},
|
|
disableItem:function(id){
|
|
this.getMenu(id).addCss(id, "webix_disabled");
|
|
},
|
|
enableItem:function(id){
|
|
this.getMenu(id).removeCss(id, "webix_disabled");
|
|
},
|
|
_set_item_hidden:function(id, state){
|
|
var menu = this.data;
|
|
if (menu._hidden_items[id] != state){
|
|
menu._hidden_items[id] = state;
|
|
menu.filter(function(obj){
|
|
return !menu._hidden_items[obj.id];
|
|
});
|
|
this.resize();
|
|
}
|
|
},
|
|
hideItem:function(id){
|
|
var menu = this.getMenu(id);
|
|
if (menu) menu._set_item_hidden(id, true);
|
|
},
|
|
showItem:function(id){
|
|
var menu = this.getMenu(id);
|
|
if (menu){
|
|
menu._set_item_hidden(id, false);
|
|
return webix.ui.list.prototype.showItem.call(menu, id);
|
|
}
|
|
},
|
|
_hide_sub_menu : function(mode){
|
|
if (this._open_sub_menu){
|
|
//recursive sub-closing
|
|
var sub = webix.$$(this._open_sub_menu);
|
|
if (sub._hide_sub_menu) //custom context may not have submenu
|
|
sub._hide_sub_menu(mode);
|
|
if (mode || !sub._show_on_mouse_out){
|
|
sub.hide();
|
|
this._open_sub_menu = null;
|
|
}
|
|
}
|
|
},
|
|
_create_sub_menu : function(data){
|
|
var listConfig = {
|
|
view:"submenu",
|
|
data:data.submenu
|
|
};
|
|
|
|
var settings = this.getTopMenu()._settings.submenuConfig;
|
|
if (settings)
|
|
webix.extend(listConfig, settings, true);
|
|
|
|
var parentData = this.getMenuItem(data.id);
|
|
if(parentData && parentData.config)
|
|
webix.extend(listConfig, parentData.config, true);
|
|
|
|
var menu = webix.ui(listConfig);
|
|
menu._parent_menu = this;
|
|
return menu._settings.id;
|
|
},
|
|
$skin:function(){
|
|
webix.ui.list.prototype.$skin.call(this);
|
|
this.type.height = webix.skin.$active.menuHeight;
|
|
},
|
|
defaults:{
|
|
scroll:"",
|
|
layout:"x",
|
|
mouseEventDelay:100,
|
|
subMenuPos:"bottom"
|
|
}
|
|
}, webix.ui.list);
|
|
|
|
|
|
webix.protoUI({
|
|
name:"submenu",
|
|
$init:function(){
|
|
this._body_cell = webix.clone(this._dummy_cell_interface);
|
|
this._body_cell._view = this;
|
|
|
|
this.attachEvent('onMouseOut',function(){
|
|
if (this.getTopMenu()._settings.openAction == "click")
|
|
return;
|
|
if (!this._child_menu_active && !this._show_on_mouse_out)
|
|
this.hide();
|
|
});
|
|
|
|
//inform parent that focus is still in menu
|
|
this.attachEvent('onMouseMoving',function(){
|
|
if (this._parent_menu)
|
|
webix.$$(this._parent_menu)._child_menu_active = true;
|
|
});
|
|
|
|
},
|
|
$skin:function(){
|
|
webix.ui.menu.prototype.$skin.call(this);
|
|
webix.ui.popup.prototype.$skin.call(this);
|
|
|
|
this.type.height = webix.skin.$active.menuHeight;
|
|
},
|
|
_dummy_cell_interface : {
|
|
$getSize:function(dx, dy){
|
|
//we saving height and width, as list can hardcode new values
|
|
var h = this._view._settings.height*1;
|
|
var w = this._view._settings.width*1;
|
|
var size = webix.ui.menu.prototype.$getSize.call(this._view, dx, dy);
|
|
//restoring
|
|
this._view._settings.height = h;
|
|
this._view._settings.width = w;
|
|
return size;
|
|
},
|
|
$setSize:function(x,y){
|
|
if (this._view._settings.scroll)
|
|
this._view._bodyobj.style.height = y+"px";
|
|
},
|
|
destructor:function(){ this._view = null; }
|
|
},
|
|
//ignore body element
|
|
body_setter:function(){
|
|
},
|
|
getChildViews:function(){ return []; },
|
|
defaults:{
|
|
width:150,
|
|
subMenuPos:"right",
|
|
layout:"y",
|
|
autoheight:true
|
|
},
|
|
type:{
|
|
height: webix.skin.menuHeight,
|
|
subsign:true
|
|
}
|
|
}, webix.ui.menu, webix.ui.popup);
|
|
|
|
|
|
|
|
|
|
webix.ContextHelper = {
|
|
defaults:{
|
|
padding:"4",
|
|
hidden:true
|
|
},
|
|
body_setter:function(value){
|
|
value = webix.ui.window.prototype.body_setter.call(this, value);
|
|
this._body_cell._viewobj.style.borderWidth = "0px";
|
|
return value;
|
|
},
|
|
attachTo:function(obj){
|
|
webix.assert(obj, "Invalid target for Context::attach");
|
|
var id;
|
|
if (obj.on_context)
|
|
id = obj.attachEvent("onAfterContextMenu", webix.bind(this._show_at_ui, this));
|
|
else
|
|
id = webix.event(obj, "contextmenu", this._show_at_node, {bind:this});
|
|
|
|
this.attachEvent("onDestruct", function(){
|
|
if (obj.detachEvent)
|
|
obj.detachEvent(id);
|
|
else
|
|
webix.eventRemove(id);
|
|
obj = null;
|
|
});
|
|
},
|
|
getContext:function(){
|
|
return this._area;
|
|
},
|
|
setContext:function(area){
|
|
this._area = area;
|
|
},
|
|
_show_at_node:function(e){
|
|
this._area = webix.toNode(e||event);
|
|
return this._show_at(e);
|
|
},
|
|
_show_at_ui:function(id, e, trg){
|
|
this._area = { obj:webix.$$(e), id:id };
|
|
return this._show_at(e);
|
|
},
|
|
_show_at:function(e){
|
|
var result = this.show(e, null, true);
|
|
if (result === false) return result;
|
|
|
|
//event forced to close other popups|context menus
|
|
webix.callEvent("onClick", []);
|
|
return webix.html.preventEvent(e);
|
|
},
|
|
_show_on_mouse_out:true,
|
|
master_setter:function(value){
|
|
this.attachTo(value);
|
|
return null;
|
|
}
|
|
};
|
|
webix.protoUI({
|
|
name:"context"
|
|
}, webix.ContextHelper, webix.ui.popup);
|
|
|
|
webix.protoUI({
|
|
name:"contextmenu",
|
|
_hide_on_item_click:true,
|
|
$init: function(config){
|
|
if(config.submenuConfig)
|
|
webix.extend(config,config.submenuConfig);
|
|
}
|
|
}, webix.ContextHelper, webix.ui.submenu);
|
|
|
|
/*
|
|
|
|
*/
|
|
|
|
webix.protoUI({
|
|
name:"tabbar",
|
|
$skin:function(){
|
|
var skin = webix.skin.$active;
|
|
var defaults = this.defaults;
|
|
|
|
defaults.topOffset = skin.tabTopOffset||0;
|
|
defaults.tabOffset = (typeof skin.tabOffset != "undefined"?skin.tabOffset:10);
|
|
defaults.bottomOffset = skin.tabBottomOffset||0;
|
|
defaults.height = skin.tabbarHeight;
|
|
|
|
defaults.tabMargin = skin.tabMargin;
|
|
defaults.inputPadding = skin.inputPadding;
|
|
defaults.tabMinWidth = skin.tabMinWidth||100;
|
|
defaults.tabMoreWidth = skin.tabMoreWidth||40;
|
|
},
|
|
_getTabbarSizes: function(){
|
|
|
|
var config = this._settings,
|
|
i, len,
|
|
tabs = this._tabs||config.options,
|
|
totalWidth = this._input_width - config.tabOffset*2,
|
|
limitWidth = config.optionWidth||config.tabMinWidth;
|
|
|
|
len = tabs.length;
|
|
|
|
if(config.tabMinWidth && totalWidth/len < limitWidth){
|
|
return { max: (parseInt(totalWidth/limitWidth,10)||1)};
|
|
}
|
|
|
|
|
|
if(!config.optionWidth){
|
|
for(i=0;i< len; i++){
|
|
if(tabs[i].width){
|
|
totalWidth -= tabs[i].width+(!i&&!config .type?config.tabMargin:0);
|
|
len--;
|
|
}
|
|
}
|
|
}
|
|
|
|
return {width: (len?totalWidth/len:config.tabMinWidth)};
|
|
},
|
|
_init_popup: function(){
|
|
var obj = this._settings;
|
|
if (!obj.tabbarPopup){
|
|
var popupConfig = {
|
|
view: "popup",
|
|
width: (obj.popupWidth||200),
|
|
body:{
|
|
view: "list",
|
|
borderless: true,
|
|
select: true,
|
|
css: "webix_tab_list",
|
|
autoheight: true, yCount:obj.yCount,
|
|
type:{
|
|
template: obj.popupTemplate
|
|
}
|
|
}
|
|
};
|
|
var view = webix.ui(popupConfig);
|
|
view.getBody().attachEvent("onBeforeSelect",webix.bind(function(id){
|
|
if (id && this.callEvent("onBeforeTabClick", [id])){
|
|
this.setValue(id);
|
|
webix.$$(this._settings.tabbarPopup).hide();
|
|
this.callEvent("onAfterTabClick", [id]);
|
|
return true;
|
|
}
|
|
},this));
|
|
obj.tabbarPopup = view._settings.id;
|
|
this._destroy_with_me.push(view);
|
|
}
|
|
this._init_popup = function(){};
|
|
},
|
|
getPopup: function(){
|
|
this._init_popup();
|
|
return webix.$$(this._settings.tabbarPopup);
|
|
},
|
|
moreTemplate_setter: webix.template,
|
|
popupTemplate_setter: webix.template,
|
|
defaults:{
|
|
popupWidth: 200,
|
|
popupTemplate: "#value#",
|
|
yCount: 7,
|
|
moreTemplate: '<span class="webix_icon fa-ellipsis-h"></span>',
|
|
template:function(obj,common) {
|
|
var contentWidth, html, i, leafWidth, resultHTML, style, sum, tabs, verticalOffset, width;
|
|
|
|
common._tabs = tabs = common._filterOptions(obj.options);
|
|
|
|
if (!tabs.length){
|
|
html = "<div class='webix_tab_filler' style='width:"+common._input_width+"px; border-right:0px;'></div>";
|
|
} else {
|
|
common._check_options(tabs);
|
|
if (!obj.value && tabs.length)
|
|
obj.value = tabs[0].id;
|
|
|
|
html = "";
|
|
if (obj.tabOffset)
|
|
html += "<div class='webix_tab_filler' style='width:"+obj.tabOffset+"px;'> </div>";
|
|
contentWidth = common._input_width - obj.tabOffset*2-(!obj.type?(obj.tabMargin)*(tabs.length-1):0);
|
|
verticalOffset = obj.topOffset+obj.bottomOffset;
|
|
|
|
var sizes = common._getTabbarSizes();
|
|
|
|
if(sizes.max && sizes.max < tabs.length){
|
|
//we need popup
|
|
var popup = common.getPopup();
|
|
popup.hide();
|
|
|
|
var list = (popup.getBody()||null);
|
|
if(list){
|
|
if(sizes.max){
|
|
var found = false;
|
|
for( i = 0; i < tabs.length && !found; i++)
|
|
if(tabs[i].id== obj.value){
|
|
found = true;
|
|
if((i+1) > sizes.max){
|
|
var selectedTab = tabs.splice(i, 1);
|
|
var displayTabs = tabs.splice(0, sizes.max-1).concat(selectedTab);
|
|
tabs = displayTabs.concat(tabs);
|
|
}
|
|
}
|
|
list.clearAll();
|
|
list.parse(tabs.slice(sizes.max));
|
|
}
|
|
else{
|
|
list.clearAll();
|
|
}
|
|
}
|
|
} else if (common._settings.tabbarPopup)
|
|
webix.$$(common._settings.tabbarPopup).hide();
|
|
|
|
sum = obj.tabOffset;
|
|
var lastTab = false;
|
|
for(i = 0; (i<tabs.length) && !lastTab; i++) {
|
|
|
|
// tab width
|
|
if(sizes && sizes.max){
|
|
if(sizes.max == (i + 1)){
|
|
lastTab = true;
|
|
}
|
|
contentWidth = common._input_width - obj.tabOffset*2-(!obj.type&&(sizes.max>1)?(obj.tabMargin)*(sizes.max-1):0);
|
|
width = (contentWidth - obj.tabMoreWidth)/sizes.max ;
|
|
}
|
|
else
|
|
width = sizes.width;
|
|
|
|
width = (tabs[i].width||obj.optionWidth||width);
|
|
|
|
sum += width + (i&&!obj.type?obj.tabMargin:0);
|
|
|
|
if(obj.tabMargin>0&&i&&!obj.type)
|
|
html += "<div class='webix_tab_filler' style='width:"+obj.tabMargin+"px;'></div>";
|
|
|
|
// tab innerHTML
|
|
html += common._getTabHTML(tabs[i],width);
|
|
|
|
|
|
if(lastTab){
|
|
html += '<div class="webix_tab_more_icon" style="width:'+obj.tabMoreWidth+'px;">'+obj.moreTemplate(obj,common)+'</div>';
|
|
sum += obj.tabMoreWidth;
|
|
}
|
|
}
|
|
|
|
|
|
leafWidth = common._content_width - sum;
|
|
|
|
if (leafWidth>0 && !obj.type)
|
|
html += "<div class='webix_tab_filler' style='width:"+leafWidth+"px;'> </div>";
|
|
}
|
|
|
|
resultHTML = "";
|
|
|
|
// consider top and bottom offset in tabs height (top tabbar)
|
|
style = (verticalOffset&& !obj.type)?"height:"+(common._content_height-verticalOffset)+"px":"";
|
|
|
|
//space above tabs (top tabbar)
|
|
if(obj.topOffset && !obj.type)
|
|
resultHTML += "<div class='webix_before_all_tabs' style='width:100%;height:"+obj.topOffset+"px'></div>";
|
|
|
|
// tabs html
|
|
resultHTML += "<div style='"+style+"' class='webix_all_tabs "+(obj.type?("webixtype_"+obj.type):"")+"'>"+html+"</div>";
|
|
|
|
//space below to tabs (top tabbar)
|
|
if(obj.bottomOffset && !obj.type)
|
|
resultHTML += "<div class='webix_after_all_tabs' style='width:100%;height:"+obj.bottomOffset+"px'></div>";
|
|
|
|
return resultHTML;
|
|
}
|
|
},
|
|
_getTabHTML: function(tab,width){
|
|
var html,
|
|
className = '',
|
|
config = this.config;
|
|
|
|
if(tab.id== config.value)
|
|
className=" webix_selected";
|
|
|
|
if (tab.css)
|
|
className+=" "+tab.css;
|
|
|
|
width = (tab.width||width);
|
|
|
|
html ='<div class="webix_item_tab'+className+'" button_id="'+tab.id+'" style="width:'+width+'px;">';
|
|
|
|
// a tab title
|
|
if(this._tabTemplate){
|
|
var calcHeight = this._content_height- config.inputPadding*2 - 2;
|
|
var height = this._content_height - 2;
|
|
var temp = webix.extend({ cheight: calcHeight, aheight:height }, tab);
|
|
html+= this._tabTemplate(temp);
|
|
}
|
|
else {
|
|
var icon = tab.icon?("<span class='webix_icon fa-"+tab.icon+"'></span> "):"";
|
|
html+=icon + tab.value;
|
|
}
|
|
|
|
if (tab.close || config.close)
|
|
html+="<span class='webix_tab_close webix_icon fa-times'></span>";
|
|
|
|
html+="</div>";
|
|
return html;
|
|
},
|
|
_types:{
|
|
image:"<div class='webix_img_btn_top' style='height:#cheight#px;background-image:url(#image#);'><div class='webix_img_btn_text'>#value#</div></div>",
|
|
icon:"<div class='webix_img_btn' style='line-height:#cheight#px;height:#cheight#px;'><span class='webix_icon_btn fa-#icon#' style='max-width:#cheight#px;max-height:#cheight#px;'></span>#value#</div>",
|
|
iconTop:"<div class='webix_img_btn_top' style='height:#cheight#px;width:100%;top:0px;text-align:center;'><span class='webix_icon fa-#icon#'></span><div class='webix_img_btn_text'>#value#</div></div>"
|
|
},
|
|
type_setter:function(value){
|
|
this._settings.tabOffset = 0;
|
|
if (this._types[value])
|
|
this._tabTemplate = webix.template(this._types[value]);
|
|
return value;
|
|
}
|
|
}, webix.ui.segmented);
|
|
|
|
webix.protoUI({
|
|
name:"tabview",
|
|
defaults:{
|
|
type:"clean"
|
|
},
|
|
setValue:function(val){
|
|
this._cells[0].setValue(val);
|
|
},
|
|
getValue:function(){
|
|
return this._cells[0].getValue();
|
|
},
|
|
getTabbar:function(){
|
|
return this._cells[0];
|
|
},
|
|
getMultiview:function(){
|
|
return this._cells[1];
|
|
},
|
|
addView:function(obj){
|
|
var id = obj.body.id = obj.body.id || webix.uid();
|
|
|
|
this.getMultiview().addView(obj.body);
|
|
|
|
obj.id = obj.body.id;
|
|
obj.value = obj.header;
|
|
delete obj.body;
|
|
delete obj.header;
|
|
|
|
var t = this.getTabbar();
|
|
t.addOption(obj);
|
|
t.refresh();
|
|
|
|
return id;
|
|
},
|
|
removeView:function(id){
|
|
var t = this.getTabbar();
|
|
t.removeOption(id);
|
|
t.refresh();
|
|
},
|
|
$init:function(config){
|
|
this.$ready.push(this._init_tabview_handlers);
|
|
|
|
var cells = config.cells;
|
|
var tabs = [];
|
|
|
|
webix.assert(cells && cells.length, "tabview must have cells collection");
|
|
|
|
for (var i = cells.length - 1; i >= 0; i--){
|
|
var view = cells[i].body||cells[i];
|
|
if (!view.id) view.id = "view"+webix.uid();
|
|
tabs[i] = { value:cells[i].header, id:view.id, close:cells[i].close, width:cells[i].width, hidden: !!cells[i].hidden};
|
|
cells[i] = view;
|
|
}
|
|
|
|
var tabbar = { view:"tabbar", multiview:true };
|
|
var mview = { view:"multiview", cells:cells, animate:(!!config.animate) };
|
|
|
|
if (config.value)
|
|
tabbar.value = config.value;
|
|
|
|
if (config.tabbar)
|
|
webix.extend(tabbar, config.tabbar, true);
|
|
if (config.multiview)
|
|
webix.extend(mview, config.multiview, true);
|
|
|
|
tabbar.options = tabbar.options || tabs;
|
|
|
|
config.rows = [
|
|
tabbar, mview
|
|
];
|
|
|
|
delete config.cells;
|
|
delete config.tabs;
|
|
},
|
|
_init_tabview_handlers:function(){
|
|
this.getTabbar().attachEvent("onOptionRemove", function(id){
|
|
var view = webix.$$(id);
|
|
if (view)
|
|
view.destructor();
|
|
});
|
|
}
|
|
}, webix.ui.layout);
|
|
|
|
|
|
|
|
|
|
|
|
(function(){
|
|
|
|
function _tagname(el) {
|
|
if (!el.tagName) return null;
|
|
return el.tagName.toLowerCase();
|
|
}
|
|
function _attribute(el, name) {
|
|
if (!el.getAttribute) return null;
|
|
var attr = el.getAttribute(name);
|
|
return attr ? attr.toLowerCase() : null;
|
|
}
|
|
function _get_html_value() {
|
|
var tagname = _tagname(this);
|
|
if (_get_value[tagname])
|
|
return _get_value[tagname](this);
|
|
return _get_value.other(this);
|
|
}
|
|
|
|
var _get_value = {
|
|
radio: function(el){
|
|
for (var i = 0; i < el.length; i++)
|
|
if (el[i].checked) return el[i].value;
|
|
return "";
|
|
},
|
|
input: function(el) {
|
|
var type = _attribute(el, 'type');
|
|
if (type === 'checkbox')
|
|
return el.checked;
|
|
return el.value;
|
|
},
|
|
textarea: function(el) {
|
|
return el.value;
|
|
},
|
|
select: function(el) {
|
|
var index = el.selectedIndex;
|
|
return el.options[index].value;
|
|
},
|
|
other: function(el) {
|
|
return el.innerHTML;
|
|
}
|
|
};
|
|
|
|
function _set_html_value(value) {
|
|
var tagname = _tagname(this);
|
|
if (_set_value[tagname])
|
|
return _set_value[tagname]( this, value);
|
|
return _set_value.other( this, value);
|
|
}
|
|
|
|
var _set_value = {
|
|
radio:function(el, value){
|
|
for (var i = 0; i < el.length; i++)
|
|
el[i].checked = (el[i].value == value);
|
|
},
|
|
input: function(el, value) {
|
|
var type = _attribute(el, 'type');
|
|
if (type === 'checkbox')
|
|
el.checked = (value) ? true : false;
|
|
else
|
|
el.value = value;
|
|
},
|
|
textarea: function(el, value) {
|
|
el.value = value;
|
|
},
|
|
select: function(el, value) {
|
|
//select first option if no provided and if possible
|
|
el.value = value?value:el.firstElementChild.value||value;
|
|
},
|
|
other: function(el, value) {
|
|
el.innerHTML = value;
|
|
}
|
|
};
|
|
|
|
|
|
webix.protoUI({
|
|
name:"htmlform",
|
|
$init: function(config) {
|
|
this.elements = {};
|
|
this._default_values = false;
|
|
|
|
if (config.content && (config.container == config.content || !config.container && config.content == document.body))
|
|
this._copy_inner_content = true;
|
|
},
|
|
content_setter:function(content){
|
|
content = webix.toNode(content);
|
|
if (this._copy_inner_content){
|
|
while (content.childNodes.length > 1)
|
|
this._viewobj.childNodes[0].appendChild(content.childNodes[0]);
|
|
} else {
|
|
this._viewobj.childNodes[0].appendChild(content);
|
|
}
|
|
this._parse_inputs();
|
|
return true;
|
|
},
|
|
render:function(){
|
|
webix.ui.template.prototype.render.apply(this, arguments);
|
|
this._parse_inputs();
|
|
},
|
|
_parse_inputs: function() {
|
|
var inputs = this._viewobj.querySelectorAll("[name]");
|
|
this.elements = {};
|
|
|
|
|
|
for (var i=0; i<inputs.length; i++){
|
|
var el = inputs[i];
|
|
var name = _attribute(el, "name");
|
|
if (name){
|
|
var tag = _tagname(el) === "button";
|
|
var type = _attribute(el, "type");
|
|
|
|
var cant_clear = tag || type === "button" || type === "submit";
|
|
|
|
if (type === "radio"){
|
|
var stack = this.elements[name] || [];
|
|
stack.tagName = "radio";
|
|
stack.push(el);
|
|
el = stack;
|
|
}
|
|
|
|
this.elements[name] = el;
|
|
|
|
el.getValue = _get_html_value;
|
|
el.setValue = _set_html_value;
|
|
el._allowsClear = !cant_clear;
|
|
el._settings = { defaultValue : el.getValue() };
|
|
}
|
|
}
|
|
|
|
return this.elements;
|
|
},
|
|
_mark_invalid:function(id,obj){
|
|
this._clear_invalid(id,obj);
|
|
var el = this._viewobj.querySelector('[name="' + id + '"]');
|
|
if (el) webix.html.addCss(el, "invalid");
|
|
},
|
|
_clear_invalid:function(id,obj){
|
|
var el = this._viewobj.querySelector('[name="' + id + '"]');
|
|
if (el) webix.html.removeCss(el, "invalid");
|
|
}
|
|
|
|
}, webix.ui.template, webix.Values);
|
|
|
|
})();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
webix.dp = function(name,getOnly){
|
|
if (typeof name == "object" && name._settings)
|
|
name = name._settings.id;
|
|
if (webix.dp._pull[name] || getOnly)
|
|
return webix.dp._pull[name];
|
|
|
|
if (typeof name == "string"||typeof name == "number")
|
|
name = { master:webix.$$(name) };
|
|
|
|
var dp = new webix.DataProcessor(name);
|
|
var masterId = dp._settings.master._settings.id;
|
|
webix.dp._pull[masterId]=dp;
|
|
|
|
webix.$$(masterId).attachEvent("onDestruct",function(){
|
|
webix.dp._pull[this._settings.id] = null;
|
|
delete webix.dp._pull[this._settings.id];
|
|
});
|
|
|
|
return dp;
|
|
};
|
|
webix.dp._pull = {};
|
|
webix.dp.$$ = function(id){
|
|
return webix.dp._pull[id];
|
|
};
|
|
|
|
|
|
webix.DataProcessor = webix.proto({
|
|
defaults: {
|
|
autoupdate:true,
|
|
updateFromResponse:false,
|
|
mode:"post",
|
|
operationName:"webix_operation",
|
|
trackMove:false
|
|
},
|
|
|
|
|
|
/*! constructor
|
|
**/
|
|
$init: function() {
|
|
this.reset();
|
|
this._ignore = false;
|
|
this.name = "DataProcessor";
|
|
this.$ready.push(this._after_init_call);
|
|
},
|
|
reset:function(){
|
|
this._updates = [];
|
|
},
|
|
url_setter:function(value){
|
|
/*
|
|
we can use simple url or mode->url
|
|
*/
|
|
var mode = "";
|
|
if (typeof value == "string"){
|
|
var parts = value.split("->");
|
|
if (parts.length > 1){
|
|
value = parts[1];
|
|
mode = parts[0];
|
|
}
|
|
} else if (value && value.mode){
|
|
mode = value.mode;
|
|
value = value.url;
|
|
}
|
|
|
|
if (mode)
|
|
return webix.proxy(mode, value);
|
|
|
|
return value;
|
|
},
|
|
master_setter:function(value){
|
|
var store = value;
|
|
if (value.name != "DataStore")
|
|
store = value.data;
|
|
|
|
this._settings.store = store;
|
|
return value;
|
|
},
|
|
/*! attaching onStoreUpdated event
|
|
**/
|
|
_after_init_call: function(){
|
|
webix.assert(this._settings.store, "store or master need to be defined for the dataprocessor");
|
|
this._settings.store.attachEvent("onStoreUpdated", webix.bind(this._onStoreUpdated, this));
|
|
this._settings.store.attachEvent("onDataMove", webix.bind(this._onDataMove, this));
|
|
},
|
|
ignore:function(code,master){
|
|
var temp = this._ignore;
|
|
this._ignore = true;
|
|
code.call((master||this));
|
|
this._ignore = temp;
|
|
},
|
|
off:function(){
|
|
this._ignore = true;
|
|
},
|
|
on:function(){
|
|
this._ignore = false;
|
|
},
|
|
|
|
_copy_data:function(source){
|
|
var obj = {};
|
|
for (var key in source)
|
|
if (key.indexOf("$")!==0)
|
|
obj[key]=source[key];
|
|
return obj;
|
|
},
|
|
save:function(id, operation, obj){
|
|
operation = operation || "update";
|
|
this._save_inner(id, (obj || this._settings.store.getItem(id)), operation);
|
|
},
|
|
_save_inner:function(id, obj, operation){
|
|
if (typeof id == "object") id = id.toString();
|
|
if (!id || this._ignore === true || !operation || operation == "paint") return true;
|
|
|
|
var store = this._settings.store;
|
|
if (store && store._scheme_serialize)
|
|
obj = store._scheme_serialize(obj);
|
|
|
|
var update = { id: id, data:this._copy_data(obj), operation:operation };
|
|
//save parent id
|
|
if (!webix.isUndefined(obj.$parent)) update.data.parent = obj.$parent;
|
|
|
|
if (update.operation != "delete"){
|
|
//prevent saving of not-validated records
|
|
var master = this._settings.master;
|
|
if (master && master.data && master.data.getMark && master.data.getMark(id, "webix_invalid"))
|
|
update._invalid = true;
|
|
|
|
if (!this.validate(null, update.data))
|
|
update._invalid = true;
|
|
}
|
|
|
|
if (this._check_unique(update))
|
|
this._updates.push(update);
|
|
|
|
if (this._settings.autoupdate)
|
|
this.send();
|
|
|
|
return true;
|
|
},
|
|
_onDataMove:function(sid, tindex, parent, targetid){
|
|
if (this._settings.trackMove){
|
|
var obj = webix.copy(this._settings.store.getItem(sid));
|
|
var order = this._settings.store.order;
|
|
|
|
obj.webix_move_index = tindex;
|
|
obj.webix_move_id = targetid;
|
|
obj.webix_move_parent = parent;
|
|
this._save_inner(sid, obj, "order");
|
|
}
|
|
},
|
|
_onStoreUpdated: function(id, obj, operation){
|
|
switch (operation) {
|
|
case 'save':
|
|
operation = "update";
|
|
break;
|
|
case 'update':
|
|
operation = "update";
|
|
break;
|
|
case 'add':
|
|
operation = "insert";
|
|
break;
|
|
case 'delete':
|
|
operation = "delete";
|
|
break;
|
|
default:
|
|
return true;
|
|
}
|
|
return this._save_inner(id, obj, operation);
|
|
},
|
|
_check_unique:function(check){
|
|
for (var i = 0; i < this._updates.length; i++){
|
|
var one = this._updates[i];
|
|
if (one.id == check.id){
|
|
if (check.operation == "delete"){
|
|
if (one.operation == "insert")
|
|
this._updates.splice(i,1);
|
|
else
|
|
one.operation = "delete";
|
|
}
|
|
one.data = check.data;
|
|
one._invalid = check._invalid;
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
},
|
|
send:function(){
|
|
this._sendData();
|
|
},
|
|
_sendData: function(){
|
|
if (!this._settings.url)
|
|
return;
|
|
|
|
var marked = this._updates;
|
|
var to_send = [];
|
|
var url = this._settings.url;
|
|
|
|
for (var i = 0; i < marked.length; i++) {
|
|
var tosave = marked[i];
|
|
|
|
if (tosave._in_progress) continue;
|
|
if (tosave._invalid) continue;
|
|
|
|
var id = tosave.id;
|
|
var operation = tosave.operation;
|
|
var precise_url = (typeof url == "object" && !url.$proxy) ? url[operation] : url;
|
|
var proxy = precise_url && (precise_url.$proxy || typeof precise_url === "function");
|
|
|
|
if (!precise_url) continue;
|
|
|
|
if (this._settings.store._scheme_save)
|
|
this._settings.store._scheme_save(tosave.data);
|
|
|
|
if (!this.callEvent("onBefore"+operation, [id, tosave]))
|
|
continue;
|
|
tosave._in_progress = true;
|
|
|
|
if (!this.callEvent("onBeforeDataSend", [tosave])) return;
|
|
|
|
tosave.data = this._updatesData(tosave.data);
|
|
|
|
var callback = this._send_callback({ id:tosave.id, status:tosave.operation });
|
|
if (precise_url.$proxy){
|
|
if (precise_url.save)
|
|
precise_url.save(this.config.master, tosave, this, callback);
|
|
else
|
|
to_send.push(tosave);
|
|
} else {
|
|
if (operation == "insert") delete tosave.data.id;
|
|
|
|
|
|
if (proxy){
|
|
//promise
|
|
precise_url(tosave.id, tosave.operation, tosave.data).then(
|
|
function(data){
|
|
if (data && typeof data.json == "function")
|
|
data = data.json();
|
|
callback.success("", data, -1);
|
|
},
|
|
function(error){
|
|
callback.error("", null, error);
|
|
}
|
|
);
|
|
} else {
|
|
//normal url
|
|
tosave.data[this._settings.operationName] = operation;
|
|
|
|
this._send(precise_url, tosave.data, this._settings.mode, operation, callback);
|
|
}
|
|
}
|
|
|
|
this.callEvent("onAfterDataSend", [tosave]);
|
|
}
|
|
|
|
if (url.$proxy && url.saveAll && to_send.length)
|
|
url.saveAll(this.config.master, to_send, this, this._send_callback({}));
|
|
},
|
|
|
|
|
|
/*! process updates list to POST and GET params according dataprocessor protocol
|
|
* @param updates
|
|
* list of objects { id: "item id", data: "data hash", operation: "type of operation"}
|
|
* @return
|
|
* object { post: { hash of post params as name: value }, get: { hash of get params as name: value } }
|
|
**/
|
|
|
|
|
|
|
|
_updatesData:function(source){
|
|
var target = {};
|
|
for (var j in source){
|
|
if (j.indexOf("$")!==0)
|
|
target[j] = source[j];
|
|
}
|
|
return target;
|
|
},
|
|
|
|
|
|
|
|
/*! send dataprocessor query to server
|
|
* and attach event to process result
|
|
* @param url
|
|
* server url
|
|
* @param get
|
|
* hash of get params
|
|
* @param post
|
|
* hash of post params
|
|
* @mode
|
|
* 'post' or 'get'
|
|
**/
|
|
_send: function(url, post, mode, operation, callback) {
|
|
webix.assert(url, "url was not set for DataProcessor");
|
|
|
|
if (typeof url == "function")
|
|
return url(post, operation, callback);
|
|
|
|
webix.ajax()[mode](url, post, callback);
|
|
},
|
|
_send_callback:function(id){
|
|
var self = this;
|
|
return {
|
|
success:function(t,d,l){ return self._processResult(id, t,d,l); },
|
|
error :function(t,d,l){ return self._processError(id, t,d,l); }
|
|
};
|
|
},
|
|
attachProgress:function(start, end, error){
|
|
this.attachEvent("onBeforeDataSend", start);
|
|
this.attachEvent("onAfterSync", end);
|
|
this.attachEvent("onAfterSaveError", error);
|
|
this.attachEvent("onLoadError", error);
|
|
},
|
|
_processError:function(id, text, data, loader){
|
|
if (id)
|
|
this._innerProcessResult(true, id.id, false, id.status, false, {text:text, data:data, loader:loader});
|
|
else {
|
|
this.callEvent("onLoadError", arguments);
|
|
webix.callEvent("onLoadError", [text, data, loader, this]);
|
|
}
|
|
},
|
|
_innerProcessResult:function(error, id, newid, status, obj, details){
|
|
var master = this._settings.master;
|
|
var update = this.getItemState(id);
|
|
update._in_progress = false;
|
|
|
|
if (error){
|
|
if (this.callEvent("onBeforeSaveError", [id, status, obj, details])){
|
|
update._invalid = true;
|
|
if(this._settings.undoOnError && master._settings.undo)
|
|
master.undo(id);
|
|
this.callEvent("onAfterSaveError", [id, status, obj, details]);
|
|
return;
|
|
}
|
|
} else
|
|
this.setItemState(id, false);
|
|
|
|
//update from response
|
|
if (newid && id != newid)
|
|
this._settings.store.changeId(id, newid);
|
|
|
|
if (obj && status != "delete" && this._settings.updateFromResponse)
|
|
this.ignore(function(){
|
|
this._settings.store.updateItem(newid || id, obj);
|
|
});
|
|
|
|
|
|
//clean undo history, for the saved record
|
|
if(this._settings.undoOnError && master._settings.undo)
|
|
master.removeUndo(newid||id);
|
|
|
|
this.callEvent("onAfterSave",[obj, id, details]);
|
|
this.callEvent("onAfter"+status, [obj, id, details]);
|
|
},
|
|
processResult: function(state, hash, details){
|
|
//compatibility with custom json response
|
|
var error = (hash && (hash.status == "error" || hash.status == "invalid"));
|
|
var newid = (hash ? ( hash.newid || hash.id ) : false);
|
|
|
|
this._innerProcessResult(error, state.id, newid, state.status, hash, details);
|
|
},
|
|
// process saving from result
|
|
_processResult: function(state, text, data, loader){
|
|
this.callEvent("onBeforeSync", [state, text, data, loader]);
|
|
|
|
if (loader === -1){
|
|
//callback from promise
|
|
this.processResult(state, data, {});
|
|
} else {
|
|
var proxy = this._settings.url;
|
|
if (proxy.$proxy && proxy.result)
|
|
proxy.result(state, this._settings.master, this, text, data, loader);
|
|
else {
|
|
var hash;
|
|
if (text){
|
|
hash = data.json();
|
|
//invalid response
|
|
if (text && typeof hash == "undefined")
|
|
hash = { status:"error" };
|
|
}
|
|
this.processResult(state, hash, {text:text, data:data, loader:loader});
|
|
}
|
|
}
|
|
|
|
this.callEvent("onAfterSync", [state, text, data, loader]);
|
|
},
|
|
|
|
|
|
/*! if it's defined escape function - call it
|
|
* @param value
|
|
* value to escape
|
|
* @return
|
|
* escaped value
|
|
**/
|
|
escape: function(value) {
|
|
if (this._settings.escape)
|
|
return this._settings.escape(value);
|
|
else
|
|
return encodeURIComponent(value);
|
|
},
|
|
getState:function(){
|
|
if (!this._updates.length) return false;
|
|
for (var i = this._updates.length - 1; i >= 0; i--)
|
|
if (this._updates[i]._in_progress)
|
|
return "saving";
|
|
|
|
return true;
|
|
},
|
|
getItemState:function(id){
|
|
var index = this._get_stack_index(id);
|
|
return this._updates[index] || null;
|
|
},
|
|
setItemState:function(id, state){
|
|
if (state)
|
|
this.save(id, state);
|
|
else{
|
|
var index = this._get_stack_index(id);
|
|
if (index > -1)
|
|
this._updates.splice(index, 1);
|
|
}
|
|
},
|
|
_get_stack_index: function(id) {
|
|
var index = -1;
|
|
var update = null;
|
|
for (var i=0; i < this._updates.length; i++)
|
|
if (this._updates[i].id == id) {
|
|
index = i;
|
|
break;
|
|
}
|
|
|
|
return index;
|
|
}
|
|
|
|
}, webix.Settings, webix.EventSystem, webix.ValidateData);
|
|
|
|
|
|
|
|
|
|
webix.jsonp = function(url, params, callback, master){
|
|
var id = "webix_jsonp_"+webix.uid();
|
|
var script = document.createElement('script');
|
|
script.id = id;
|
|
script.type = 'text/javascript';
|
|
|
|
var head = document.getElementsByTagName("head")[0];
|
|
|
|
if (typeof params == "function"){
|
|
master = callback;
|
|
callback = params;
|
|
params = {};
|
|
}
|
|
|
|
if (!params)
|
|
params = {};
|
|
|
|
params.jsonp = "webix.jsonp."+id;
|
|
webix.jsonp[id]=function(){
|
|
callback.apply(master||window, arguments);
|
|
script.parentNode.removeChild(script);
|
|
callback = head = master = script = null;
|
|
delete webix.jsonp[id];
|
|
};
|
|
|
|
var vals = [];
|
|
for (var key in params) vals.push(key+"="+encodeURIComponent(params[key]));
|
|
|
|
url += (url.indexOf("?") == -1 ? "?" : "&")+vals.join("&");
|
|
|
|
script.src = url ;
|
|
head.appendChild(script);
|
|
};
|
|
|
|
webix.markup = {
|
|
namespace:"x",
|
|
attribute:"data-",
|
|
dataTag:"li",
|
|
_dash:/-([a-z])/g,
|
|
_after_dash:function (match) { return match[1].toUpperCase(); },
|
|
_parse_int:{
|
|
width:true,
|
|
height:true,
|
|
gravity:true,
|
|
margin:true,
|
|
padding:true,
|
|
paddingX:true,
|
|
paddingY:true,
|
|
minWidth:true,
|
|
maxWidth:true,
|
|
minHeight:true,
|
|
maxHeight:true,
|
|
headerRowHeight:true
|
|
},
|
|
_parse_bool:{
|
|
disabled:true,
|
|
hidden:true
|
|
},
|
|
_view_has_method:function(view, name){
|
|
return webix.ui.hasMethod(view, name);
|
|
},
|
|
|
|
init: function(node, target, scope){
|
|
node = node || document.body;
|
|
|
|
var els = [];
|
|
var temp = this._get_core_els(node);
|
|
var html = temp.html;
|
|
var ui = null;
|
|
|
|
//make copy to prevent node removing effects
|
|
for (var i = temp.length - 1; i >= 0; i--) els[i] = temp[i];
|
|
|
|
for (var i = 0; i < els.length; i++) {
|
|
var config, temp_config;
|
|
//collect configuration
|
|
config = this._sub_markup(els[i], html);
|
|
config.$scope = scope;
|
|
ui = this._initComponent(config, els[i], html, target);
|
|
}
|
|
return ui;
|
|
},
|
|
|
|
parse:function(source, mode){
|
|
//convert from string to object
|
|
if (typeof source == "string")
|
|
source = webix.DataDriver[mode || "xml"].toObject(source, source);
|
|
|
|
var els = this._get_core_els(source, mode);
|
|
return this._sub_markup(els[0], els.html);
|
|
},
|
|
|
|
_initComponent:function(config, node, html, target){
|
|
if (!target){
|
|
config.container = node.parentNode;
|
|
webix.html.remove(node);
|
|
} else
|
|
config.container = target;
|
|
|
|
if (this._view_has_method(config.view, "setPosition"))
|
|
delete config.container;
|
|
|
|
//init ui
|
|
return webix.ui(config);
|
|
},
|
|
|
|
_get_core_els:function(node){
|
|
this._full_prefix = this.namespace?(this.namespace+":"):"";
|
|
this._full_prefix_top = this._full_prefix+"ui";
|
|
|
|
//xhtml mode
|
|
var els = node.getElementsByTagName(this._full_prefix_top);
|
|
if (!els.length && node.documentElement && node.documentElement.tagName == this._full_prefix_top)
|
|
els = [ node.documentElement ];
|
|
|
|
//loading from xml file with valid namespace
|
|
if (!els.length && this.namespace){
|
|
els = node.getElementsByTagName("ui");
|
|
if (!els.length && node.documentElement && node.documentElement.tagName == "ui")
|
|
els = [ node.documentElement ];
|
|
}
|
|
|
|
if (!els.length){
|
|
//html mode
|
|
els = this._get_html_tops(node);
|
|
els.html = true;
|
|
}
|
|
return els;
|
|
},
|
|
|
|
//html conversion
|
|
_get_html_tops: function(node){
|
|
if (node.getAttribute && node.getAttribute(this.attribute+"view"))
|
|
return [node];
|
|
|
|
var els = node.querySelectorAll("["+this.attribute+"view]");
|
|
|
|
var tags = []; var marks = [];
|
|
for (var i = 0; i < els.length; i++)
|
|
if (!els[i].parentNode.getAttribute(this.attribute+"view"))
|
|
tags.push(els[i]);
|
|
|
|
return tags;
|
|
},
|
|
|
|
|
|
|
|
_sub_markup: function(el, html, json){
|
|
var htmltable = false;
|
|
//ignore top x:ui for xhtml and xml
|
|
if (!json){
|
|
var name = this._get_name(el, html);
|
|
if (name == "ui"){
|
|
var childs = el.childNodes;
|
|
for (var i = 0; i < childs.length; i++)
|
|
if (childs[i].nodeType == 1){
|
|
return this._sub_markup(childs[i], html);
|
|
}
|
|
}
|
|
json = { view: name };
|
|
if (html && el.tagName.toLowerCase() == "table"){
|
|
json.data = el;
|
|
json.datatype = "htmltable";
|
|
htmltable = true;
|
|
}
|
|
}
|
|
|
|
var is_layout = json.view == "cols" || json.view == "rows" || this._view_has_method(json.view, "addView");
|
|
|
|
var subs = [];
|
|
var has_tags = 0;
|
|
var allow_sub_tags = !(html || el.style); //only for xml documents
|
|
var first = el.firstChild;
|
|
while (first){
|
|
//tag node
|
|
if (first.nodeType == 1){
|
|
var name = this._get_name(first, html);
|
|
if (name == "data"){
|
|
has_tags = 1;
|
|
var data = first; first = first.nextSibling;
|
|
json.data = this._handle_data(data, html);
|
|
continue;
|
|
} else if (name == "config"){
|
|
this._get_config_html(first, json, html);
|
|
var confignode = first;
|
|
first = first.nextSibling;
|
|
|
|
webix.html.remove(confignode);
|
|
continue;
|
|
} else if (name == "column"){
|
|
has_tags = 1;
|
|
|
|
var column = this._tag_to_json(first, html);
|
|
column.header = column.header || column.value;
|
|
column.width = column.width * 1 || "";
|
|
|
|
json.columns = json.columns || [];
|
|
json.columns.push(column);
|
|
} else if (name || (is_layout && html)){
|
|
var obj = this._sub_markup(first , html , { view:name });
|
|
if (obj.view == "head")
|
|
json.head = obj.rows ? obj.rows[0] : obj.template;
|
|
else if (obj.view == "body"){
|
|
if (this._view_has_method(json.view, "addView")){
|
|
//multiview, accordion
|
|
|
|
//subtag or plain value
|
|
//in case of multiple sub tags, only first will be used
|
|
// #dirty
|
|
subs.push({
|
|
body: (obj.rows ? obj.rows[0] : obj.value),
|
|
header:obj.header || ""
|
|
});
|
|
} else {
|
|
//window, fieldset
|
|
|
|
//one sub tag - use it
|
|
//multiple sub tags - create sub layout
|
|
//or use plain text value
|
|
json.body = obj.rows ? ( obj.rows.length == 1 ? obj.rows[0] : { rows:obj.rows } ) : obj.value;
|
|
}
|
|
} else
|
|
subs.push(obj);
|
|
} else if (allow_sub_tags) {
|
|
has_tags = 1;
|
|
var tagName = first.tagName;
|
|
if (html) tagName = tagName.toLowerCase().replace(this._dash, this._after_dash);
|
|
json[tagName] = webix.DataDriver.xml.tagToObject(first);
|
|
|
|
}
|
|
}
|
|
|
|
first = first.nextSibling;
|
|
}
|
|
|
|
this._attrs_to_json(el, json, html);
|
|
|
|
if (subs.length){
|
|
if (json.stack)
|
|
json[json.stack] = subs;
|
|
else if (this._view_has_method(json.view, "setValues"))
|
|
json["elements"] = subs;
|
|
else if (json.view == "rows"){
|
|
json.view = "layout";
|
|
json.rows = subs;
|
|
} else if (json.view == "cols"){
|
|
json.view = "layout";
|
|
json.cols = subs;
|
|
} else if (this._view_has_method(json.view, "setValue")){
|
|
json["cells"] = subs;
|
|
} else if (this._view_has_method(json.view, "getBody")){
|
|
json.body = subs.length == 1 ? subs[0] : { rows:subs };
|
|
} else
|
|
json["rows"] = subs;
|
|
} else if (!htmltable && !has_tags){
|
|
if (html && !json.template && (!json.view || json.view == "template")){
|
|
json.view = "template";
|
|
json.content = el;
|
|
} else {
|
|
var content = this._content(el, html);
|
|
if (content){
|
|
var target = "template";
|
|
if (this._view_has_method(json.view, "setValue"))
|
|
target = "value";
|
|
json[target] = json[target] || content;
|
|
}
|
|
}
|
|
}
|
|
|
|
return json;
|
|
},
|
|
|
|
_empty: function(str) {
|
|
var clean = str.replace(/\s+/gm, '');
|
|
return (clean.length > 0) ? false : true;
|
|
},
|
|
|
|
_markup_names:{
|
|
body:1,
|
|
head:1,
|
|
data:1,
|
|
rows:1,
|
|
cols:1,
|
|
cells:1,
|
|
elements:1,
|
|
ui:1,
|
|
column:1,
|
|
config:1
|
|
},
|
|
|
|
_get_config_html:function(tag, json, html){
|
|
var master = this._attrs_to_json(tag, { });
|
|
if (master.name){
|
|
json[master.name] = master;
|
|
delete master.name;
|
|
} else
|
|
if (master.stack) json[master.stack] = [];
|
|
else
|
|
json = master;
|
|
|
|
var childs = tag.childNodes;
|
|
for (var i = 0; i < childs.length; i++) {
|
|
var sub = null;
|
|
if (childs[i].nodeType == 1 && childs[i].tagName.toLowerCase() == "config" && childs[i].attributes.length)
|
|
sub = this._get_config_html(childs[i], master, html);
|
|
else
|
|
sub = childs[i].innerHTML;
|
|
if (master.stack && sub)
|
|
json[master.stack].push(sub);
|
|
|
|
}
|
|
return json;
|
|
},
|
|
|
|
_get_name:function(tag, html){
|
|
//value of view attribute or config tag
|
|
if (html)
|
|
return tag.getAttribute(this.attribute+"view") || ( tag.tagName.toLowerCase() == "config" ? "config" : null);
|
|
var name = tag.tagName.toLowerCase();
|
|
if (this.namespace){
|
|
if (name.indexOf(this._full_prefix) === 0 || tag.scopeName == this.namespace)
|
|
return name.replace(this._full_prefix,"");
|
|
} else {
|
|
if (webix.ui[name] || this._markup_names[name])
|
|
return name;
|
|
}
|
|
return 0;
|
|
},
|
|
|
|
_handle_data:function(el, html){
|
|
var data = [];
|
|
|
|
var records = el.getElementsByTagName(webix.markup.dataTag);
|
|
for (var i=0; i<records.length; i++){
|
|
var rec = records[i];
|
|
if (rec.parentNode.parentNode.tagName != webix.markup.dataTag){
|
|
var json = this._tag_to_json(rec, html);
|
|
//reuse css class
|
|
if (rec.className) json.$css = rec.className;
|
|
data.push(json);
|
|
}
|
|
}
|
|
|
|
webix.html.remove(el);
|
|
|
|
return data;
|
|
},
|
|
_content:function(el, html){
|
|
if (el.style) return el.innerHTML;
|
|
if (el.firstChild)
|
|
return el.firstChild.wholeText||el.firstChild.data||"";
|
|
return "";
|
|
},
|
|
|
|
|
|
_tag_to_json:function(el, html){
|
|
if (!html)
|
|
return webix.DataDriver.xml.tagToObject(el);
|
|
|
|
var json = this._attrs_to_json(el, {}, html);
|
|
if (!json.value && el.childNodes.length)
|
|
json.value = this._content(el, html);
|
|
|
|
return json;
|
|
},
|
|
_attrs_to_json:function(el, json, html){
|
|
var attrs = el.attributes;
|
|
for (var i=0; i<attrs.length; i++){
|
|
var name = attrs[i].name;
|
|
if (html){
|
|
if (name.indexOf(this.attribute) !== 0)
|
|
continue;
|
|
name = name.replace(this.attribute,"").replace(this._dash, this._after_dash);
|
|
}
|
|
|
|
var value = attrs[i].value;
|
|
if (value.indexOf("json://") != -1)
|
|
value = JSON.parse(value.replace("json://",""));
|
|
|
|
if (this._parse_int[name])
|
|
value = parseInt(value,10);
|
|
else if (this._parse_bool[name])
|
|
value = (value && value !== "false" && value != "0");
|
|
|
|
json[name] = value;
|
|
}
|
|
return json;
|
|
}
|
|
};
|
|
(function(){
|
|
var _webix_msg_cfg = null;
|
|
function callback(config, result){
|
|
var usercall = config.callback;
|
|
modality(false);
|
|
config.box.parentNode.removeChild(config.box);
|
|
_webix_msg_cfg = config.box = null;
|
|
if (usercall)
|
|
usercall(result,config.details);
|
|
}
|
|
function modal_key(e){
|
|
if (_webix_msg_cfg){
|
|
e = e||event;
|
|
var code = e.which||event.keyCode;
|
|
if (webix.message.keyboard){
|
|
if (code == 13 || code == 32)
|
|
callback(_webix_msg_cfg, true);
|
|
if (code == 27)
|
|
callback(_webix_msg_cfg, false);
|
|
|
|
if (e.preventDefault)
|
|
e.preventDefault();
|
|
return !(e.cancelBubble = true);
|
|
}
|
|
}
|
|
}
|
|
if (document.attachEvent)
|
|
document.attachEvent("onkeydown", modal_key);
|
|
else
|
|
document.addEventListener("keydown", modal_key, true);
|
|
|
|
function modality(mode){
|
|
if(!modality.cover || !modality.cover.parentNode){
|
|
modality.cover = document.createElement("DIV");
|
|
//necessary for IE only
|
|
modality.cover.onkeydown = modal_key;
|
|
modality.cover.className = "webix_modal_cover";
|
|
document.body.appendChild(modality.cover);
|
|
}
|
|
modality.cover.style.display = mode?"inline-block":"none";
|
|
}
|
|
|
|
function button(text, result, className){
|
|
return "<div class='webix_popup_button"+(className?(" "+className):"")+"' result='"+result+"' ><div>"+text+"</div></div>";
|
|
}
|
|
|
|
function info(text){
|
|
if (!t.area){
|
|
t.area = document.createElement("DIV");
|
|
t.area.className = "webix_message_area";
|
|
t.area.style[t.position]="5px";
|
|
document.body.appendChild(t.area);
|
|
}
|
|
t.hide(text.id);
|
|
var message = document.createElement("DIV");
|
|
message.innerHTML = "<div>"+text.text+"</div>";
|
|
message.className = "webix_info webix_" + text.type;
|
|
message.onclick = function(){
|
|
t.hide(text.id);
|
|
text = null;
|
|
};
|
|
|
|
if (webix.$testmode)
|
|
message.className += " webix_no_transition";
|
|
|
|
if (t.position == "bottom" && t.area.firstChild)
|
|
t.area.insertBefore(message,t.area.firstChild);
|
|
else
|
|
t.area.appendChild(message);
|
|
|
|
if (text.expire > 0)
|
|
t.timers[text.id]=window.setTimeout(function(){
|
|
t.hide(text.id);
|
|
}, text.expire);
|
|
|
|
//styling for animation
|
|
message.style.height = message.offsetHeight-2+"px";
|
|
|
|
t.pull[text.id] = message;
|
|
message = null;
|
|
|
|
return text.id;
|
|
}
|
|
function _boxStructure(config, ok, cancel){
|
|
var box = document.createElement("DIV");
|
|
box.className = " webix_modal_box webix_"+config.type;
|
|
box.setAttribute("webixbox", 1);
|
|
|
|
var inner = '';
|
|
if (config.width)
|
|
box.style.width = config.width+(webix.rules.isNumber(config.width)?"px":"");
|
|
if (config.height)
|
|
box.style.height = config.height+(webix.rules.isNumber(config.height)?"px":"");
|
|
if (config.title)
|
|
inner+='<div class="webix_popup_title">'+config.title+'</div>';
|
|
inner+='<div class="webix_popup_text"><span>'+(config.content?'':config.text)+'</span></div><div class="webix_popup_controls">';
|
|
if (ok || config.ok)
|
|
inner += button(config.ok || "OK", true,"confirm");
|
|
if (cancel || config.cancel)
|
|
inner += button(config.cancel || "Cancel", false);
|
|
if (config.buttons){
|
|
for (var i=0; i<config.buttons.length; i++)
|
|
inner += button(config.buttons[i],i);
|
|
}
|
|
inner += '</div>';
|
|
box.innerHTML = inner;
|
|
|
|
if (config.content){
|
|
var node = config.content;
|
|
if (typeof node == "string")
|
|
node = document.getElementById(node);
|
|
if (node.style.display == 'none')
|
|
node.style.display = "";
|
|
box.childNodes[config.title?1:0].appendChild(node);
|
|
}
|
|
|
|
box.onclick = function(e){
|
|
e = e ||event;
|
|
var source = e.target || e.srcElement;
|
|
if (!source.className) source = source.parentNode;
|
|
if (source.className.indexOf("webix_popup_button")!=-1){
|
|
var result = source.getAttribute("result");
|
|
result = (result == "true")||(result == "false"?false:result);
|
|
callback(config, result);
|
|
}
|
|
e.cancelBubble = true;
|
|
};
|
|
config.box = box;
|
|
if (ok||cancel||config.buttons)
|
|
_webix_msg_cfg = config;
|
|
|
|
return box;
|
|
}
|
|
function _createBox(config, ok, cancel){
|
|
var box = config.tagName ? config : _boxStructure(config, ok, cancel);
|
|
|
|
if (!config.hidden)
|
|
modality(true);
|
|
document.body.appendChild(box);
|
|
var x = config.left||Math.abs(Math.floor(((window.innerWidth||document.documentElement.offsetWidth) - box.offsetWidth)/2));
|
|
var y = config.top||Math.abs(Math.floor(((window.innerHeight||document.documentElement.offsetHeight) - box.offsetHeight)/2));
|
|
if (config.position == "top")
|
|
box.style.top = "-3px";
|
|
else
|
|
box.style.top = y+'px';
|
|
box.style.left = x+'px';
|
|
//necessary for IE only
|
|
box.onkeydown = modal_key;
|
|
|
|
box.focus();
|
|
if (config.hidden)
|
|
webix.modalbox.hide(box);
|
|
|
|
return box;
|
|
}
|
|
|
|
function alertPopup(config){
|
|
return _createBox(config, true, false);
|
|
}
|
|
function confirmPopup(config){
|
|
return _createBox(config, true, true);
|
|
}
|
|
function boxPopup(config){
|
|
return _createBox(config);
|
|
}
|
|
function box_params(text, type, callback){
|
|
if (typeof text != "object"){
|
|
if (typeof type == "function"){
|
|
callback = type;
|
|
type = "";
|
|
}
|
|
text = {text:text, type:type, callback:callback };
|
|
}
|
|
return text;
|
|
}
|
|
function params(text, type, expire, id){
|
|
if (typeof text != "object")
|
|
text = {text:text, type:type, expire:expire, id:id};
|
|
text.id = text.id||t.uid();
|
|
text.expire = text.expire||t.expire;
|
|
return text;
|
|
}
|
|
webix.alert = function(){
|
|
var text = box_params.apply(this, arguments);
|
|
text.type = text.type || "confirm";
|
|
return alertPopup(text);
|
|
};
|
|
webix.confirm = function(){
|
|
var text = box_params.apply(this, arguments);
|
|
text.type = text.type || "alert";
|
|
return confirmPopup(text);
|
|
};
|
|
webix.modalbox = function(){
|
|
var text = box_params.apply(this, arguments);
|
|
text.type = text.type || "alert";
|
|
return boxPopup(text);
|
|
};
|
|
webix.modalbox.hide = function(node){
|
|
if(node){
|
|
while (node && node.getAttribute && !node.getAttribute("webixbox"))
|
|
node = node.parentNode;
|
|
if (node){
|
|
node.parentNode.removeChild(node);
|
|
}
|
|
}
|
|
|
|
modality(false);
|
|
_webix_msg_cfg = null;
|
|
};
|
|
var t = webix.message = function(text, type, expire, id){
|
|
text = params.apply(this, arguments);
|
|
text.type = text.type||"info";
|
|
|
|
var subtype = text.type.split("-")[0];
|
|
switch (subtype){
|
|
case "alert":
|
|
return alertPopup(text);
|
|
case "confirm":
|
|
return confirmPopup(text);
|
|
case "modalbox":
|
|
return boxPopup(text);
|
|
default:
|
|
return info(text);
|
|
}
|
|
};
|
|
|
|
t.seed = (new Date()).valueOf();
|
|
t.uid = function(){return t.seed++;};
|
|
t.expire = 4000;
|
|
t.keyboard = true;
|
|
t.position = "top";
|
|
t.pull = {};
|
|
t.timers = {};
|
|
|
|
t.hideAll = function(){
|
|
for (var key in t.pull)
|
|
t.hide(key);
|
|
};
|
|
t.hide = function(id){
|
|
var obj = t.pull[id];
|
|
if (obj && obj.parentNode){
|
|
window.setTimeout(function(){
|
|
obj.parentNode.removeChild(obj);
|
|
obj = null;
|
|
},2000);
|
|
//styling for animation
|
|
obj.style.height = 0;
|
|
obj.className+=" hidden";
|
|
|
|
if(t.timers[id])
|
|
window.clearTimeout(t.timers[id]);
|
|
delete t.pull[id];
|
|
}
|
|
};
|
|
})();
|
|
webix.debug_ready(function(){
|
|
|
|
var ignore = {
|
|
"_inner":true,
|
|
"awidth":true,
|
|
"cheight":true,
|
|
"bheight":true,
|
|
"aheight":true
|
|
};
|
|
|
|
function get_inspector_config(view){
|
|
var values={};
|
|
var options=[];
|
|
view = webix.$$(view);
|
|
|
|
for (var key in view.config){
|
|
if (ignore[key]) continue;
|
|
|
|
if (typeof view.config[key] == "object") continue;
|
|
if (typeof view.config[key] == "undefined") continue;
|
|
if (typeof view.config[key] == "function") continue;
|
|
|
|
if (key == "view" || key == "id")
|
|
options.push({ label:key, id:key});
|
|
else
|
|
options.push({ label:key, type:"text", id:key});
|
|
|
|
if (view.defaults[key] == view.config[key])
|
|
options[options.length - 1].css = { "color" : "#888" };
|
|
|
|
values[key] = view.config[key];
|
|
}
|
|
options.sort(function(a,b){
|
|
if (!a.css && b.css) return -1;
|
|
if (a.css && !b.css) return 1;
|
|
return (a.id > b.id) ? 1 : ((a.id == b.id) ? 0 : -1);
|
|
});
|
|
|
|
return { elements:options, data:values, head:" ["+view.name+"] <strong>"+view._settings.id+"</strong>" };
|
|
}
|
|
|
|
function create_inspector(){
|
|
if (!webix.$$("webix_debug_inspector_win"))
|
|
webix.ui({
|
|
id:"webix_debug_inspector_win",
|
|
view:"window",
|
|
top:2, left: 0, width:350, height:350,
|
|
head:false, autofit:false,
|
|
body:{cols:[
|
|
{ width:10},
|
|
{type:"clean", rows:[
|
|
{ view:"toolbar", elements:[
|
|
{ view:"label", value:"", id:"webix_debug_inspector_head" },
|
|
{ view:"button", width:100, value:"Hide", type:"custom", click:function(){
|
|
webix.debug_inspect();
|
|
}}
|
|
]},
|
|
{
|
|
id:"webix_debug_inspector", nameWidth:150,
|
|
view:"property", scroll:"y",
|
|
elements:[],
|
|
on:{
|
|
onaftereditstop:function(state, editor){
|
|
if (state.old == state.value) return;
|
|
|
|
var value = state.value;
|
|
if (value === "true" || value === "false"){
|
|
value = (value === "true");
|
|
} else {
|
|
var intvalue = parseInt(value,10);
|
|
if (intvalue == value)
|
|
value = intvalue;
|
|
}
|
|
|
|
var view = webix.$$(this.config.view);
|
|
view.define(editor.id, value);
|
|
if (view.refreshColumns)
|
|
view.refreshColumns();
|
|
else if (view.refresh)
|
|
view.refresh();
|
|
|
|
view.resize();
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}]
|
|
}
|
|
});
|
|
}
|
|
function show_inspector(view, ev){
|
|
create_inspector();
|
|
var win = webix.$$("webix_debug_inspector_win");
|
|
|
|
if (view){
|
|
var config = get_inspector_config(view);
|
|
var winx = document.body.offsetWidth;
|
|
var winy = document.body.offsetHeight;
|
|
var pos = ev?webix.html.pos(ev):{x:0,y:0};
|
|
|
|
win.define("height", Math.max(350, winy-4));
|
|
win.resize();
|
|
|
|
var props = webix.$$("webix_debug_inspector");
|
|
props.define("elements", config.elements);
|
|
props.define("view", view);
|
|
|
|
win.show({ x:(pos.x > winx/2 )?0:(winx-370), y:0 });
|
|
webix.$$("webix_debug_inspector").setValues(config.data);
|
|
webix.$$("webix_debug_inspector_head").setValue(config.head);
|
|
} else
|
|
win.hide();
|
|
}
|
|
webix.debug_inspect = show_inspector;
|
|
|
|
function infi(value){
|
|
if (value >= 100000)
|
|
return "Any";
|
|
return value;
|
|
}
|
|
function log_level(data, prefix, now){
|
|
window.console.log((data == now?">>":" ")+prefix + data.name+" / " +data.config.id);
|
|
prefix+=" ";
|
|
if (data._cells)
|
|
for (var i=0; i<data._cells.length; i++){
|
|
log_level(data._cells[i], prefix, now);
|
|
}
|
|
if (data._head_cell)
|
|
log_level(data._head_cell, prefix, now);
|
|
|
|
if (data._body_cell)
|
|
log_level(data._body_cell, prefix, now);
|
|
}
|
|
|
|
webix.ui({
|
|
view:"contextmenu",
|
|
id:"webix:debugmenu",
|
|
on:{
|
|
onBeforeShow:function(e){
|
|
if (!e.ctrlKey) return false;
|
|
|
|
var view = webix.html.locate(e, "view_id");
|
|
if (!view) return false;
|
|
this.config.lastTarget = view;
|
|
|
|
webix.blockEvent();
|
|
webix.delay(function(){ webix.unblockEvent(); });
|
|
},
|
|
onShow:function(){
|
|
var view = webix.$$(this.config.lastTarget);
|
|
var info = "<span style='color:#888'>"+view._settings.id + "<sup style='float:right'>["+view.name+"]</sup></span>";
|
|
document.getElementById("webix_debug_cmx").innerHTML = info;
|
|
}
|
|
},
|
|
data:[
|
|
"<div id='webix_debug_cmx'></div>",
|
|
{ id:"inspect", value:"Inspect"},
|
|
{ id:"docs", value:"Documentation"},
|
|
{
|
|
value:"Log to Console", submenu:[
|
|
{ id:"size", value:"Sizes" },
|
|
{ id:"tree", value:"Tree" },
|
|
{ id:"dump", value:"Dump"}
|
|
]
|
|
}
|
|
],
|
|
click:function(id, ev){
|
|
//mixing two object result in confusion
|
|
var obj = webix.$$(this.config.lastTarget);
|
|
|
|
if (id == "dump"){
|
|
window.console.info("\n"+obj.name+" / "+obj.config.id);
|
|
window.console.log("\nView: ",obj,", Config: ", obj.config, ", Data: ", obj.data);
|
|
window.console.log(obj.$view);
|
|
}
|
|
|
|
if (id == "tree"){
|
|
|
|
var now = obj;
|
|
while (obj.getParentView())
|
|
obj = obj.getParentView();
|
|
|
|
window.console.log("");
|
|
log_level(obj, "", now);
|
|
}
|
|
|
|
if (id == "size"){
|
|
window.console.info("");
|
|
window.console.info("\n"+obj.name+" / "+obj.config.id);
|
|
window.console.info("\n[min] ", obj.config.width, " x ", obj.config.height);
|
|
var sizes = obj.$getSize(0,0);
|
|
window.console.info("[max] ", infi(sizes[1]), " x ", infi(sizes[3])+(obj.config.autoheight?", auto height":""));
|
|
window.console.info("[gravity] ", obj.config.gravity);
|
|
|
|
window.console.info("\n[content] ", obj._content_width, " x ", obj._content_height);
|
|
window.console.info("[last set] ", obj._last_size[0], " x ", obj._last_size[1]);
|
|
if (obj._settings._inner)
|
|
window.console.info("\n[borders] ", "left:", !obj._settings._inner.left,"\ttop:", !obj._settings._inner.top, "\tright:", !obj._settings._inner.right, "\tbottom:", !obj._settings._inner.bottom);
|
|
else
|
|
window.console.info("\n[borders] none");
|
|
}
|
|
|
|
if (id == "docs")
|
|
window.open("http://docs.webix.com/api__refs__ui."+obj.name+".html","__blank");
|
|
|
|
if (id == "inspect"){
|
|
show_inspector(this.config.lastTarget, ev);
|
|
}
|
|
},
|
|
master:document.body
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
webix.protoUI({
|
|
name:"carousel",
|
|
defaults:{
|
|
scrollSpeed:"300ms",
|
|
type: "clean",
|
|
navigation: {}
|
|
},
|
|
$init:function(config){
|
|
this._viewobj.className += " webix_carousel";
|
|
this._layout = null;
|
|
this._dataobj = null;
|
|
this._active_cell = 0;
|
|
this.$ready.unshift(this._initLayout);
|
|
this.$ready.push(this._after_init_call);
|
|
},
|
|
|
|
_initLayout: function(){
|
|
if(this._layout && this._layout.destructor)
|
|
this._layout.destructor();
|
|
|
|
var layout = "";
|
|
|
|
if(this.config.cols){
|
|
layout = "cols";
|
|
this._vertical_orientation = 0;
|
|
}
|
|
else{
|
|
layout = "rows";
|
|
this._vertical_orientation = 1;
|
|
}
|
|
|
|
var config = {borderless: true, type: "clean"};
|
|
config[layout] = webix.copy(this._settings[layout]);
|
|
var layoutProp = ["type", "margin", "marginX", "marginY", "padding", "paddingX", "paddingY"];
|
|
var layoutConfig = {};
|
|
for(var i=0; i< layoutProp.length; i++){
|
|
if(this._settings[layoutProp[i]]){
|
|
layoutConfig[layoutProp[i]] = this._settings[layoutProp[i]];
|
|
}
|
|
}
|
|
webix.extend(config,layoutConfig,true);
|
|
|
|
this._layout = webix.ui._view(config);
|
|
this._layout._parent_cell = this;
|
|
|
|
this._viewobj.appendChild(this._layout._viewobj);
|
|
this._cells = this._layout._cells;
|
|
|
|
this._layout._show = webix.bind(webix.ui.carousel.prototype._show,this);
|
|
this._layout.adjustScroll = webix.bind(webix.ui.carousel.prototype.adjustScroll,this);
|
|
|
|
webix.attachEvent("onReconstruct", webix.bind(function(view){
|
|
if(view == this._layout)
|
|
this._setScroll();
|
|
},this));
|
|
|
|
this._contentobj = this._viewobj.firstChild;
|
|
},
|
|
getChildViews:function(){
|
|
return [this._layout];
|
|
},
|
|
getLayout:function(){
|
|
return this._layout;
|
|
},
|
|
_after_init_call:function(){
|
|
this._contentobj.setAttribute("touch_scroll", (this._vertical_orientation?"y":"x"));
|
|
|
|
this._layout.attachEvent("onAfterScroll",webix.bind(function(){
|
|
this.callEvent("onShow",[this.getActiveId()]);
|
|
},this));
|
|
},
|
|
adjustScroll:function(matrix){
|
|
var size = (this._vertical_orientation?this._content_height:this._content_width);
|
|
|
|
var correction;
|
|
if (this._vertical_orientation) {
|
|
correction = Math.round(matrix.f/size);
|
|
matrix.f = correction*size;
|
|
} else {
|
|
correction = Math.round(matrix.e/size);
|
|
matrix.e = correction*size;
|
|
}
|
|
|
|
this._active_cell = - correction;
|
|
|
|
if(this._settings.navigation)
|
|
this._renderNavItems();
|
|
|
|
return true;
|
|
},
|
|
_show:function(obj){
|
|
var i, layout, _nextCell, _size, x, y;
|
|
_nextCell = -1;
|
|
layout = this._layout;
|
|
for (i=0; i < layout._cells.length; i++){
|
|
if (layout._cells[i]==obj){
|
|
_nextCell = i;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (_nextCell < 0 || _nextCell == this._active_cell)
|
|
return;
|
|
|
|
this._active_cell = _nextCell;
|
|
_size = (layout._vertical_orientation?this._content_height:this._content_width);
|
|
|
|
x = -(layout._vertical_orientation?0:_nextCell*_size);
|
|
y = -(layout._vertical_orientation?_nextCell*_size:0);
|
|
|
|
this.scrollTo(x,y);
|
|
this.callEvent("onShow",[layout._cells[this._active_cell]._settings.id]);
|
|
if(this._settings.navigation)
|
|
this._renderPanel();
|
|
},
|
|
scrollTo:function(x,y){
|
|
if (webix.Touch && webix.animate.isSupported())
|
|
webix.Touch._set_matrix(this._contentobj, x,y, this._settings.scrollSpeed||"100ms");
|
|
else{
|
|
this._contentobj.style.marginLeft = x+"px";
|
|
this._contentobj.style.marginTop = y+"px";
|
|
}
|
|
},
|
|
navigation_setter:function(config){
|
|
this._mergeSettings(config,{
|
|
type: "corner",
|
|
buttons: true,
|
|
items: true
|
|
});
|
|
return config;
|
|
},
|
|
showNext:function(){
|
|
if (this._active_cell < this._layout._cells.length - 1)
|
|
this.setActiveIndex(this._active_cell+1);
|
|
},
|
|
showPrev:function(){
|
|
if (this._active_cell > 0)
|
|
this.setActiveIndex(this._active_cell-1);
|
|
},
|
|
setActiveIndex:function(value){
|
|
webix.assert(value < this._layout._cells.length, "Not existing index in collection");
|
|
|
|
var id = this._layout._cells[value]._settings.id;
|
|
webix.$$(id).show();
|
|
},
|
|
getActiveIndex:function(){
|
|
return this._active_cell;
|
|
},
|
|
$getSize:function(dx, dy){
|
|
var layoutSizes = this._layout.$getSize(0, 0);
|
|
var selfSizes = webix.ui.view.prototype.$getSize.call(this, dx, dy);
|
|
if(this._layout._vertical_orientation){
|
|
selfSizes[0] = Math.max(selfSizes[0], layoutSizes[0]);
|
|
selfSizes[1] = Math.min(selfSizes[1], layoutSizes[1]);
|
|
|
|
} else{
|
|
selfSizes[2] = Math.max(selfSizes[2], layoutSizes[2]);
|
|
selfSizes[3] = Math.min(selfSizes[3], layoutSizes[3]);
|
|
}
|
|
return selfSizes;
|
|
},
|
|
$setSize:function(x,y){
|
|
var layout = this._layout;
|
|
var c = layout._cells.length;
|
|
|
|
var changed = webix.ui.view.prototype.$setSize.call(this,x,y);
|
|
var yc = this._content_height*(layout._vertical_orientation?c:1);
|
|
var xc = this._content_width*(layout._vertical_orientation?1:c);
|
|
|
|
if (changed){
|
|
this._contentobj.style.height = yc+"px";
|
|
this._contentobj.style.width = xc+"px";
|
|
layout.$setSize(xc,yc);
|
|
this._setScroll();
|
|
} else
|
|
layout.$setSize(xc,yc);
|
|
},
|
|
_setScroll: function(){
|
|
var layout = this._layout;
|
|
var activeCell = this._active_cell||0;
|
|
var size = (layout._vertical_orientation?this._content_height:this._content_width);
|
|
|
|
var x = -(layout._vertical_orientation?0:activeCell*size);
|
|
var y = -(layout._vertical_orientation?activeCell*size:0);
|
|
|
|
|
|
this.scrollTo(x,y);
|
|
|
|
if(this._settings.navigation)
|
|
this._renderPanel();
|
|
},
|
|
getActiveId:function(){
|
|
var cell = this._layout._cells[this._active_cell];
|
|
return cell?cell._settings.id:null;
|
|
},
|
|
setActive:function(value){
|
|
webix.$$(value).show();
|
|
}
|
|
}, webix.EventSystem,webix.NavigationButtons, webix.ui.view);
|
|
|
|
/*
|
|
UI:Uploader
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
webix.type(webix.ui.list, {
|
|
name:"uploader",
|
|
template:"#name# {common.removeIcon()}{common.percent()}<div style='float:right'>#sizetext#</div>",
|
|
percent:function(obj){
|
|
if (obj.status == 'transfer')
|
|
return "<div style='width:60px; text-align:center; float:right'>"+obj.percent+"%</div>";
|
|
return "<div class='webix_upload_"+obj.status+"'><span class='"+(obj.status =="error"?"error_icon":"fa-ok webix_icon")+"'></span></div>";
|
|
},
|
|
removeIcon:function(obj){
|
|
return "<div class='webix_remove_upload'><span class='cancel_icon'></span></div>";
|
|
},
|
|
on_click:{
|
|
"webix_remove_upload":function(ev, id){
|
|
webix.$$(this.config.uploader).files.remove(id);
|
|
}
|
|
}
|
|
});
|
|
|
|
webix.UploadDriver = {
|
|
flash: {
|
|
$render: function(render_config) {
|
|
|
|
if (!window.swfobject)
|
|
webix.require("legacy/swfobject.js", true); // sync loading
|
|
|
|
var config = this._settings;
|
|
config.swfId = (config.swfId||"webix_swf_"+webix.uid());
|
|
|
|
this._getBox().innerHTML += "<div class='webix_upload_flash'><div id='"+config.swfId+"'></div></div>";
|
|
this._upload_area = this._getBox().lastChild;
|
|
|
|
// add swf object
|
|
swfobject.embedSWF(webix.codebase+"/legacy/uploader.swf", config.swfId, "100%", "100%", "9", null, {
|
|
uploaderId: config.id,
|
|
ID: config.swfId,
|
|
enableLogs:(config.enableLogs?"1":""),
|
|
paramName:(config.inputName),
|
|
multiple:(config.multiple?"Y":"")
|
|
}, {wmode:"transparent"});
|
|
|
|
var v = swfobject.getFlashPlayerVersion();
|
|
|
|
webix.event(this._viewobj, "click", webix.bind(function() {
|
|
var now_date = new Date();
|
|
if (now_date - (this._upload_timer_click||0) > 250){
|
|
this.fileDialog();
|
|
}
|
|
}, this));
|
|
|
|
this.files.attachEvent("onBeforeDelete", webix.bind(this._stop_file,this));
|
|
},
|
|
$applyFlash: function(name,params){
|
|
return this[name].apply(this,params);
|
|
},
|
|
getSwfObject: function(){
|
|
return swfobject.getObjectById(this._settings.swfId);
|
|
},
|
|
fileDialog:function(){
|
|
if(this.getSwfObject())
|
|
this.getSwfObject().showDialog();
|
|
},
|
|
send: function(id){
|
|
if (typeof id == "function"){
|
|
this._last_assigned_upload_callback = id;
|
|
id = 0;
|
|
}
|
|
|
|
if (!id){
|
|
var order = this.files.data.order;
|
|
var complete = true;
|
|
if (order.length)
|
|
for (var i=0; i<order.length; i++){
|
|
complete = this.send(order[i])&&complete;
|
|
}
|
|
|
|
if (complete)
|
|
this._upload_complete();
|
|
|
|
return;
|
|
}
|
|
var item = this.files.getItem(id);
|
|
if (item.status !== 'client')
|
|
return false;
|
|
item.status = 'transfer';
|
|
|
|
if(this.getSwfObject()){
|
|
this.getSwfObject().upload(id, this._settings.upload,this._settings.formData||{});
|
|
}
|
|
return true;
|
|
|
|
},
|
|
$beforeAddFileToQueue: function( id, name, size ){
|
|
|
|
var type = name.split(".").pop();
|
|
var format = this._format_size(size);
|
|
return this.callEvent("onBeforeFileAdd", [{
|
|
id: id,
|
|
name:name,
|
|
size:size,
|
|
sizetext:format,
|
|
type:type
|
|
}]);
|
|
},
|
|
$addFileToQueue: function(id, name, size){
|
|
if(this.files.exists(id))
|
|
return false;
|
|
if (!this._settings.multiple)
|
|
this.files.clearAll();
|
|
var type = name.split(".").pop();
|
|
var format = this._format_size(size);
|
|
var file_struct = {
|
|
name:name,
|
|
id: id,
|
|
size:size,
|
|
sizetext:format,
|
|
type:type,
|
|
status:"client"
|
|
};
|
|
this.files.add(file_struct);
|
|
this.callEvent("onAfterFileAdd", [file_struct]);
|
|
|
|
if (id && this._settings.autosend)
|
|
this.send(id);
|
|
},
|
|
stopUpload: function(id){
|
|
this._stop_file(id);
|
|
},
|
|
_stop_file: function(id) {
|
|
var item = this.files.getItem(id);
|
|
this.getSwfObject().uploadStop(id);
|
|
item.status = "client";
|
|
},
|
|
$onUploadComplete: function(){
|
|
if(this._settings.autosend){
|
|
this._upload_complete();
|
|
}
|
|
},
|
|
$onUploadSuccess: function(id,name,response){
|
|
var item = this.files.getItem(id);
|
|
if(item){
|
|
item.status = "server";
|
|
item.progress = 100;
|
|
if(response.text && (typeof response.text == "string")){
|
|
|
|
|
|
webix.DataDriver.json.toObject(response.text);
|
|
|
|
webix.extend(item,response,true);
|
|
}
|
|
this.callEvent("onFileUpload", [item,response]);
|
|
this.callEvent("onChange", []);
|
|
this.files.updateItem(id);
|
|
}
|
|
},
|
|
$onUploadFail: function(id){
|
|
var item = this.files.getItem(id);
|
|
item.status = "error";
|
|
delete item.percent;
|
|
this.files.updateItem(id);
|
|
this.callEvent("onFileUploadError", [item, ""]);
|
|
}
|
|
},
|
|
html5: {
|
|
$render: function(config) {
|
|
if (this._upload_area){
|
|
this._contentobj.appendChild(this._upload_area);
|
|
return;
|
|
}
|
|
this.files.attachEvent("onBeforeDelete", this._stop_file);
|
|
|
|
var input_config = {
|
|
"type": "file",
|
|
"class": "webix_hidden_upload",
|
|
tabindex:-1
|
|
};
|
|
|
|
if (this._settings.accept)
|
|
input_config.accept = this._settings.accept;
|
|
|
|
if (this._settings.multiple)
|
|
input_config.multiple = "true";
|
|
|
|
var f = webix.html.create("input",input_config);
|
|
this._upload_area = this._contentobj.appendChild(f);
|
|
|
|
webix.event(this._viewobj, 'drop', webix.bind(function(e) { this._drop(e); webix.html.preventEvent(e); }, this));
|
|
webix.event(f, 'change', webix.bind(function() {
|
|
this._add_files(f.files);
|
|
if (webix.env.isIE){
|
|
var t = document.createElement("form");
|
|
t.appendChild(this._upload_area);
|
|
t.reset();
|
|
this._contentobj.appendChild(f);
|
|
} else
|
|
f.value = "";
|
|
}, this));
|
|
webix.event(this._viewobj, "click", webix.bind(function() {
|
|
var now_date = new Date();
|
|
if (now_date - (this._upload_timer_click||0) > 250){
|
|
this.fileDialog();
|
|
}
|
|
}, this));
|
|
|
|
webix.event(this._viewobj, 'dragenter', webix.html.preventEvent);
|
|
webix.event(this._viewobj, 'dragexit', webix.html.preventEvent);
|
|
webix.event(this._viewobj, 'dragover', webix.html.preventEvent);
|
|
},
|
|
|
|
// adding files by drag-n-drop
|
|
_drop: function(e) {
|
|
var files = e.dataTransfer.files;
|
|
if (this.callEvent('onBeforeFileDrop', [files, e]))
|
|
this._add_files(files);
|
|
this.callEvent("onAfterFileDrop",[files, e]);
|
|
},
|
|
|
|
fileDialog:function(context){
|
|
this._upload_timer_click = new Date();
|
|
this._last_file_context = context;
|
|
var inputs = this._viewobj.getElementsByTagName("INPUT");
|
|
inputs[inputs.length-1].click();
|
|
},
|
|
send: function(id, details){
|
|
//alternative syntx send(callback)
|
|
if (typeof id == "function"){
|
|
this._last_assigned_upload_callback = id;
|
|
id = 0;
|
|
}
|
|
|
|
if (!id){
|
|
var order = this.files.data.order;
|
|
var complete = true;
|
|
|
|
if (order.length)
|
|
for (var i=0; i<order.length; i++)
|
|
complete = (!this.send(order[i], details)) && complete;
|
|
|
|
if (complete)
|
|
this._upload_complete();
|
|
|
|
return;
|
|
}
|
|
|
|
var item = this.files.getItem(id);
|
|
if (item.status !== 'client') return false;
|
|
|
|
webix.assert(this._settings.upload, "You need to define upload url for uploader component");
|
|
item.status = 'transfer';
|
|
|
|
var formData = new FormData();
|
|
formData.append(this.config.inputName, item.file);
|
|
|
|
var headers = {};
|
|
details = details || {};
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
if(webix.callEvent("onBeforeAjax",["POST", this._settings.upload, details, xhr, headers, formData])){
|
|
for (var key in details)
|
|
formData.append(key, details[key]);
|
|
|
|
item.xhr = xhr;
|
|
|
|
xhr.upload.addEventListener('progress', webix.bind(function(e){ this.$updateProgress(id, e.loaded/e.total*100); }, this), false);
|
|
xhr.onload = webix.bind(function(e){ if (!xhr.aborted) this._file_complete(id); }, this);
|
|
xhr.open('POST', this._settings.upload, true);
|
|
|
|
for (var key in headers)
|
|
xhr.setRequestHeader(key, headers[key]);
|
|
|
|
xhr.send(formData);
|
|
}
|
|
|
|
this.$updateProgress(id, 0);
|
|
return true;
|
|
},
|
|
|
|
_file_complete: function(id) {
|
|
var item = this.files.getItem(id);
|
|
if (item){
|
|
var response = null;
|
|
if(item.xhr.status == 200)
|
|
response = webix.DataDriver[this._settings.datatype||"json"].toObject(item.xhr.responseText);
|
|
if (!response || response.status == "error"){
|
|
item.status = "error";
|
|
delete item.percent;
|
|
this.files.updateItem(id);
|
|
this.callEvent("onFileUploadError", [item, response]);
|
|
} else {
|
|
this._complete(id, response);
|
|
}
|
|
delete item.xhr;
|
|
}
|
|
},
|
|
stopUpload: function(id){
|
|
webix.bind(this._stop_file,this.files)(id);
|
|
},
|
|
_stop_file: function(id) {
|
|
var item = this.getItem(id);
|
|
if (typeof(item.xhr) !== 'undefined'){
|
|
item.xhr.aborted = true;
|
|
item.xhr.abort();
|
|
}
|
|
delete item.xhr;
|
|
item.status = "client";
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
webix.protoUI({
|
|
name:"uploader",
|
|
defaults:{
|
|
autosend:true,
|
|
multiple:true,
|
|
inputName:"upload"
|
|
},
|
|
$cssName:"button",
|
|
_allowsClear:true,
|
|
|
|
//will be redefined by upload driver
|
|
send:function(){},
|
|
fileDialog:function(){},
|
|
stopUpload:function(){},
|
|
|
|
$init:function(config){
|
|
var driver = webix.UploadDriver.html5;
|
|
this.files = new webix.DataCollection();
|
|
|
|
// browser doesn't support XMLHttpRequest2
|
|
if (webix.isUndefined(XMLHttpRequest) || webix.isUndefined((new XMLHttpRequest()).upload))
|
|
driver = webix.UploadDriver.flash;
|
|
|
|
webix.assert(driver,"incorrect driver");
|
|
webix.extend(this, driver, true);
|
|
},
|
|
$setSize:function(x,y){
|
|
if (webix.ui.view.prototype.$setSize.call(this,x,y)){
|
|
this.render();
|
|
}
|
|
},
|
|
apiOnly_setter:function(value){
|
|
webix.delay(this.render, this);
|
|
return (this.$apiOnly=value);
|
|
},
|
|
_add_files: function(files){
|
|
for (var i = 0; i < files.length; i++)
|
|
this.addFile(files[i]);
|
|
|
|
},
|
|
link_setter:function(value){
|
|
if (value)
|
|
webix.delay(function(){
|
|
var view = webix.$$(this._settings.link);
|
|
if (view.sync && view.filter)
|
|
view.sync(this.files);
|
|
else if (view.setValues)
|
|
this.files.data.attachEvent("onStoreUpdated", function(){
|
|
view.setValues(this);
|
|
});
|
|
view._settings.uploader = this._settings.id;
|
|
}, this);
|
|
return value;
|
|
},
|
|
|
|
addFile:function(name, size, type){
|
|
var file = null;
|
|
if (typeof name == "object"){
|
|
file = name;
|
|
name = file.name;
|
|
size = file.size;
|
|
}
|
|
|
|
var format = this._format_size(size);
|
|
type = type || name.split(".").pop();
|
|
|
|
var file_struct = {
|
|
file:file,
|
|
name:name,
|
|
id:webix.uid(),
|
|
size:size,
|
|
sizetext:format,
|
|
type:type,
|
|
context:this._last_file_context,
|
|
status:"client"
|
|
};
|
|
if (this.callEvent("onBeforeFileAdd", [file_struct])){
|
|
if (!this._settings.multiple)
|
|
this.files.clearAll();
|
|
|
|
var id = this.files.add(file_struct);
|
|
this.callEvent("onAfterFileAdd", [file_struct]);
|
|
if (id && this._settings.autosend)
|
|
this.send(id, this._settings.formData);
|
|
}
|
|
},
|
|
|
|
|
|
addDropZone:function(id, hover_text){
|
|
var node = webix.toNode(id);
|
|
var extra_css = "";
|
|
if (hover_text)
|
|
extra_css = " "+webix.html.createCss({ content:'"'+hover_text+'"' }, ":before");
|
|
|
|
var fullcss = "webix_drop_file"+extra_css;
|
|
|
|
//web
|
|
webix.event(node,"dragover", webix.html.preventEvent);
|
|
webix.event(node,"dragover", function(e){
|
|
webix.html.addCss(node, fullcss, true);
|
|
});
|
|
webix.event(node,"dragleave", function(e){
|
|
webix.html.removeCss(node, fullcss);
|
|
});
|
|
|
|
webix.event(node,"drop", webix.bind(function(e){
|
|
webix.html.removeCss(node, fullcss);
|
|
|
|
var data=e.dataTransfer;
|
|
if(data&&data.files.length)
|
|
for (var i = 0; i < data.files.length; i++)
|
|
this.addFile(data.files[i]);
|
|
|
|
return webix.html.preventEvent(e);
|
|
}, this));
|
|
},
|
|
|
|
_format_size: function(size) {
|
|
var index = 0;
|
|
while (size > 1024){
|
|
index++;
|
|
size = size/1024;
|
|
}
|
|
return Math.round(size*100)/100+" "+webix.i18n.fileSize[index];
|
|
},
|
|
|
|
_complete: function(id, response) {
|
|
if (response.status != 'error') {
|
|
var item = this.files.getItem(id);
|
|
|
|
item.status = "server";
|
|
item.progress = 100;
|
|
webix.extend(item, response, true);
|
|
|
|
this.callEvent("onFileUpload", [item, response]);
|
|
this.callEvent("onChange", []);
|
|
this.files.updateItem(id);
|
|
}
|
|
|
|
if (this.isUploaded())
|
|
this._upload_complete(response);
|
|
},
|
|
_upload_complete:function(response){
|
|
this.callEvent("onUploadComplete", [response]);
|
|
if (this._last_assigned_upload_callback){
|
|
this._last_assigned_upload_callback.call(this, response);
|
|
this._last_assigned_upload_callback = 0;
|
|
}
|
|
},
|
|
isUploaded:function(){
|
|
var order = this.files.data.order;
|
|
for (var i=0; i<order.length; i++)
|
|
if (this.files.getItem(order[i]).status != "server")
|
|
return false;
|
|
|
|
return true;
|
|
},
|
|
$onUploadComplete: function(){
|
|
|
|
},
|
|
$updateProgress: function(id, percent) {
|
|
var item = this.files.getItem(id);
|
|
item.percent = Math.round(percent);
|
|
this.files.updateItem(id);
|
|
},
|
|
setValue:function(value){
|
|
if (typeof value == "string")
|
|
value = { value:value, status:"server" };
|
|
|
|
this.files.clearAll();
|
|
if (value)
|
|
this.files.parse(value);
|
|
|
|
this.callEvent("onChange", []);
|
|
},
|
|
getValue:function(){
|
|
var data = [];
|
|
this.files.data.each(function(obj){
|
|
if (obj.status == "server")
|
|
data.push(obj.value||obj.name);
|
|
});
|
|
|
|
return data.join(",");
|
|
}
|
|
|
|
}, webix.ui.button);
|
|
|
|
webix.html.addMeta = function(name, value){
|
|
document.getElementsByTagName('head').item(0).appendChild(webix.html.create("meta",{
|
|
name:name,
|
|
content:value
|
|
}));
|
|
|
|
};
|
|
|
|
(function(){
|
|
|
|
var orientation = function(){
|
|
var new_orientation = !!(window.orientation%180);
|
|
if (webix.ui.orientation === new_orientation) return;
|
|
webix.ui.orientation = new_orientation;
|
|
webix.callEvent("onRotate", [new_orientation]);
|
|
};
|
|
if(webix.env.touch){
|
|
webix.ui.orientation = !!((webix.isUndefined(window.orientation)?90:window.orientation)%180);
|
|
webix.event(window, ("onorientationchange" in window ?"orientationchange":"resize"), orientation);
|
|
}
|
|
|
|
|
|
if(webix.env.isFF && window.matchMedia){
|
|
window.matchMedia("(orientation: portrait)").addListener(function() {webix.ui.orientation = false; });
|
|
window.matchMedia("(orientation: landscape)").addListener(function() { webix.ui.orientation = true; });
|
|
}
|
|
webix.ui.fullScreen = function(){
|
|
if (!webix.env.touch) return;
|
|
|
|
webix.html.addMeta("apple-mobile-web-app-capable","yes");
|
|
webix.html.addMeta("viewport","initial-scale=1, maximum-scale=1, user-scalable=no");
|
|
|
|
//in ios5 we can have empty offsetHeight just after page loading
|
|
var size = document.body.offsetHeight||document.body.scrollHeight;
|
|
|
|
var iphone = navigator.userAgent.indexOf("iPhone")!=-1;
|
|
var ipad = navigator.userAgent.indexOf("iPad")!=-1;
|
|
|
|
var version = navigator.userAgent.match(/iPhone OS (\d+)/);
|
|
var iOS7 = version&&(version[1]>=7);
|
|
|
|
|
|
var iphone_safari = iphone && (size == 356 || size == 208 || size == 306 || size == 158 || size == 444);
|
|
var iphone5 = (window.screen.height==568);
|
|
|
|
var fix = function(){
|
|
var x = 0; var y=0;
|
|
if (iphone && !iOS7){
|
|
if (!webix.ui.orientation){
|
|
x = 320;
|
|
y = iphone5?(iphone_safari?504:548):(iphone_safari?416:460);
|
|
} else {
|
|
x = iphone5?568:480;
|
|
y = iphone_safari?268:300;
|
|
}
|
|
} else if (webix.env.isAndroid){
|
|
|
|
if(!webix.env.isFF){
|
|
//ipad doesn't change orientation and zoom level, so just ignore those lines
|
|
document.body.style.width = document.body.style.height = "1px";
|
|
document.body.style.overflow="hidden";
|
|
|
|
var dmod = window.outerWidth/window.innerWidth; //<1
|
|
x = window.outerWidth/dmod;
|
|
y = window.outerHeight/dmod;
|
|
}
|
|
} else if(!webix.env.isIEMobile){
|
|
x = window.innerWidth;
|
|
y = window.innerHeight;
|
|
}
|
|
|
|
if (y){
|
|
document.body.style.height = y+"px";
|
|
document.body.style.width = x+"px";
|
|
}
|
|
|
|
webix.ui.$freeze = false;
|
|
webix.ui.resize();
|
|
};
|
|
|
|
var onrotate = function(){
|
|
webix.ui.$freeze = true;
|
|
if(webix.env.isSafari)
|
|
fix();
|
|
else
|
|
webix.delay(fix,null, [], 500);
|
|
};
|
|
|
|
|
|
webix.attachEvent("onRotate", onrotate);
|
|
orientation();
|
|
webix.delay(onrotate);
|
|
|
|
};
|
|
|
|
|
|
})();
|
|
(function(){
|
|
|
|
if (window.jQuery){
|
|
|
|
var $ = jQuery;
|
|
var methods = [];
|
|
|
|
var get_id = function(node){
|
|
if (node && node.getAttribute)
|
|
return node.getAttribute("view_id");
|
|
};
|
|
|
|
var get_helper = function(name){
|
|
return function(config){
|
|
if (typeof(config) === 'string') {
|
|
if (methods[config] ) {
|
|
return methods[config].apply(this, []);
|
|
}else {
|
|
$.error('Method ' + config + ' does not exist on jQuery.'.name);
|
|
}
|
|
} else {
|
|
var views = [];
|
|
this.each(function() {
|
|
var view;
|
|
var id;
|
|
|
|
//if target a webix component - return it
|
|
var id = get_id(this) || get_id(this.firstChild);
|
|
if (id)
|
|
view = webix.$$(id);
|
|
|
|
if (!view){
|
|
//do not include data in copy as it can be massive
|
|
var temp_data = config?config.data:0;
|
|
if (temp_data) config.data = null;
|
|
|
|
var copy = webix.copy(config||{ autoheight:true, autowidth:true });
|
|
copy.view = name;
|
|
if (temp_data) config.data = copy.data = temp_data;
|
|
|
|
|
|
if (this.tagName.toLowerCase() === 'table') {
|
|
var div = webix.html.create("div",{
|
|
id:(this.getAttribute("id")||""),
|
|
"class":(this.getAttribute("class")||"")
|
|
},"");
|
|
|
|
this.parentNode.insertBefore(div, this);
|
|
copy.container = div;
|
|
view = webix.ui(copy);
|
|
view.parse(this, "htmltable");
|
|
} else {
|
|
copy.container = this;
|
|
view = webix.ui(copy);
|
|
}
|
|
}
|
|
views.push(view);
|
|
});
|
|
|
|
if (views.length === 1) return views[0];
|
|
return views;
|
|
}
|
|
};
|
|
};
|
|
|
|
var run = function(){
|
|
for (var key in webix.ui){
|
|
var name = "webix_"+key;
|
|
if (!$.fn[name])
|
|
$.fn[name] = get_helper(key);
|
|
}
|
|
};
|
|
|
|
run();
|
|
$(run);
|
|
|
|
}
|
|
|
|
})();
|
|
|
|
/*
|
|
Behavior:History - change multiview state on 'back' button
|
|
|
|
*/
|
|
|
|
webix.history = {
|
|
track:function(id, url){
|
|
this._init_state(id, url);
|
|
|
|
var view = webix.$$(id);
|
|
|
|
var handler = function(){
|
|
if (webix.history._ignored) return;
|
|
|
|
if (view.getValue)
|
|
webix.history.push(id, view.getValue());
|
|
};
|
|
|
|
if (view.getActiveId)
|
|
view.attachEvent("onViewChange", handler);
|
|
else
|
|
view.attachEvent("onChange", handler);
|
|
},
|
|
_set_state:function(view, state){
|
|
webix.history._ignored = 1;
|
|
|
|
view = webix.$$(view);
|
|
if (view.callEvent("onBeforeHistoryNav", [state]))
|
|
if (view.setValue)
|
|
view.setValue(state);
|
|
|
|
webix.history._ignored = 0;
|
|
},
|
|
push:function(view, url, value){
|
|
view = webix.$$(view);
|
|
var new_url = "";
|
|
if (url)
|
|
new_url = "#!/"+url;
|
|
if (webix.isUndefined(value)){
|
|
if (view.getValue)
|
|
value = view.getValue();
|
|
else
|
|
value = url;
|
|
}
|
|
|
|
window.history.pushState({ webix:true, id:view._settings.id, value:value }, "", new_url);
|
|
},
|
|
_init_state:function(view, url){
|
|
webix.event(window, "popstate", function(ev){
|
|
if (ev.state && ev.state.webix){
|
|
webix.history._set_state(ev.state.id, ev.state.value);
|
|
}
|
|
});
|
|
|
|
var state = window.location.hash;
|
|
webix.noanimate = true;
|
|
if (state && state.indexOf("#!/") === 0)
|
|
webix.history._set_state(view, state.replace("#!/",""));
|
|
else if (url){
|
|
webix.history.push(view, url);
|
|
webix.history._set_state(view, url);
|
|
}
|
|
webix.noanimate = false;
|
|
|
|
this._init_state = function(){};
|
|
}
|
|
};
|
|
webix.protoUI({
|
|
name:"fieldset",
|
|
defaults:{
|
|
borderless:true
|
|
},
|
|
$init:function(obj){
|
|
webix.assert(obj.body, "fieldset must have not-empty body");
|
|
|
|
this._viewobj.className += " webix_fieldset";
|
|
this._viewobj.innerHTML = "<fieldset><legend></legend><div></div></fieldset>";
|
|
},
|
|
label_setter:function(value){
|
|
this._viewobj.firstChild.childNodes[0].innerHTML = value;
|
|
return value;
|
|
},
|
|
getChildViews:function(){
|
|
return [this._body_view];
|
|
},
|
|
body_setter:function(config){
|
|
this._body_view = webix.ui(config, this._viewobj.firstChild.childNodes[1]);
|
|
this._body_view._parent_cell = this;
|
|
return config;
|
|
},
|
|
getBody:function(){
|
|
return this._body_view;
|
|
},
|
|
$getSize:function(x,y){
|
|
webix.debug_size_box_start(this, true);
|
|
x+=18; y+=30;
|
|
var t = this._last_body_size = this._body_view.$getSize(x,y);
|
|
webix.debug_size_box_end(this, t);
|
|
return t;
|
|
},
|
|
$setSize:function(x,y){
|
|
if (webix.ui.view.prototype.$setSize.call(this, x,y)){
|
|
y = Math.min(this._last_body_size[3], y);
|
|
x = Math.min(this._last_body_size[1], x);
|
|
this._body_view.$setSize(x-18,y-30);
|
|
}
|
|
}
|
|
}, webix.ui.view);
|
|
|
|
|
|
webix.protoUI({
|
|
name:"slider",
|
|
$touchCapture:true,
|
|
defaults:{
|
|
min:0,
|
|
max:100,
|
|
value:50,
|
|
step:1,
|
|
title:false,
|
|
template:function(obj, common){
|
|
var id = common._handle_id = "x" +webix.uid();
|
|
var html = "<div class='webix_slider_title'></div><div class='webix_slider_box'><div class='webix_slider_left'> </div><div class='webix_slider_right'></div><div class='webix_slider_handle' id='"+id+"'> </div></div>";
|
|
return common.$renderInput(obj, html, id);
|
|
}
|
|
},
|
|
type_setter:function(type){
|
|
this._viewobj.className += " webix_slider_"+type;
|
|
},
|
|
title_setter:function(value){
|
|
if (typeof value == 'string')
|
|
return webix.template(value);
|
|
return value;
|
|
},
|
|
_get_slider_handle:function(){
|
|
return this.$view.querySelector(".webix_slider_handle");
|
|
},
|
|
_set_inner_size:function(){
|
|
var handle = this._get_slider_handle();
|
|
var config = this._settings;
|
|
|
|
//10 - padding of webix_slider_box ( 20 = 10*2 )
|
|
//8 - width of handle / 2
|
|
|
|
if(handle){ //view is rendered for sure
|
|
var width = this._get_input_width(config);
|
|
|
|
var value = config.value%config.step?(Math.round(config.value/config.step)*config.step):config.value;
|
|
value = Math.max(Math.min(value,config.max),config.min);
|
|
var max = config.max - config.min;
|
|
var left = Math.ceil((width - 20) * (value-config.min) / max);
|
|
var right = width-20-left;
|
|
|
|
handle.style.left = 10 + left - 8 + "px";
|
|
handle.parentNode.style.width = width+"px";
|
|
//1px border
|
|
right = Math.min(Math.max(right,2),width-22);
|
|
left = Math.min(Math.max(left,2),width-22);
|
|
//width for left and right bars
|
|
var part = handle.previousSibling;
|
|
part.style.width = right + "px";
|
|
var last = part.previousSibling;
|
|
last.style.width = left + "px";
|
|
|
|
if (this._settings.title){
|
|
handle.parentNode.previousSibling.innerHTML = this._settings.title(this._settings, this);
|
|
}
|
|
}
|
|
},
|
|
refresh:function(){
|
|
this._set_inner_size();
|
|
},
|
|
$setValue:function(){
|
|
this.refresh();
|
|
},
|
|
$getValue:function(){
|
|
return this._settings.value;
|
|
},
|
|
$init:function(){
|
|
if(webix.env.touch){
|
|
this.attachEvent("onTouchStart" , webix.bind(this._on_mouse_down_start, this));
|
|
}
|
|
else
|
|
webix.event(this._viewobj, "mousedown", webix.bind(this._on_mouse_down_start, this));
|
|
},
|
|
_on_mouse_down_start:function(e){
|
|
var trg = e.target || e.srcElement;
|
|
if(this._mouse_down_process){
|
|
this._mouse_down_process(e);
|
|
}
|
|
|
|
var value = this._settings.value;
|
|
if(webix.isArray(value))
|
|
value = webix.copy(value);
|
|
|
|
if (trg.className.indexOf("webix_slider_handle")!=-1){
|
|
this._start_value = value;
|
|
return this._start_handle_dnd.apply(this,arguments);
|
|
} else if (trg.className.indexOf("webix_slider") != -1){
|
|
this._start_value = value;
|
|
|
|
this._settings.value = this._get_value_from_event.apply(this,arguments);
|
|
|
|
this._start_handle_dnd(e);
|
|
}
|
|
},
|
|
_start_handle_dnd:function(e){
|
|
if(webix.env.touch){
|
|
this._handle_drag_events = [
|
|
this.attachEvent("onTouchMove" , webix.bind(this._handle_move_process, this)),
|
|
this.attachEvent("onTouchEnd" , webix.bind(this._handle_move_stop, this))
|
|
];
|
|
}
|
|
else
|
|
this._handle_drag_events = [
|
|
webix.event(document.body, "mousemove", webix.bind(this._handle_move_process, this)),
|
|
webix.event(window, "mouseup", webix.bind(this._handle_move_stop, this))
|
|
];
|
|
webix.html.addCss(document.body,"webix_noselect");
|
|
},
|
|
_handle_move_stop:function(e){
|
|
//detach event handlers
|
|
if(this._handle_drag_events){
|
|
if(webix.env.touch){
|
|
webix.detachEvent(this._handle_drag_events[0]);
|
|
webix.detachEvent(this._handle_drag_events[1]);
|
|
}
|
|
else{
|
|
webix.eventRemove(this._handle_drag_events[0]);
|
|
webix.eventRemove(this._handle_drag_events[1]);
|
|
}
|
|
this._handle_drag_events = [];
|
|
}
|
|
|
|
webix.html.removeCss(document.body,"webix_noselect");
|
|
|
|
var value = this._settings.value;
|
|
|
|
if(webix.isArray(value))
|
|
value = webix.copy(value);
|
|
|
|
this._settings.value = this._start_value;
|
|
this.setValue(value);
|
|
},
|
|
_handle_move_process:function(e){
|
|
this._settings.value = this._get_value_from_event.apply(this,arguments);
|
|
this.refresh();
|
|
this.callEvent("onSliderDrag", []);
|
|
},
|
|
_get_value_from_event:function(event,touchContext){
|
|
// this method takes 2 arguments in case of touch env
|
|
var pos = 0;
|
|
if(webix.env.touch){
|
|
pos = touchContext?touchContext.x: event.x;
|
|
}
|
|
else
|
|
pos = webix.html.pos(event).x;
|
|
return this._get_value_from_pos(pos);
|
|
},
|
|
_get_value_from_pos:function(pos){
|
|
var config = this._settings;
|
|
//10 - padding of slider box
|
|
var max = config.max - config.min;
|
|
var left = webix.html.offset(this._get_slider_handle().parentNode).x+10;
|
|
var width = this._get_input_width(config)-20;
|
|
var newvalue = (width?(pos-left) * max / width:0);
|
|
newvalue = Math.round((newvalue+config.min)/config.step) * config.step;
|
|
return Math.max(Math.min(newvalue, config.max), config.min);
|
|
},
|
|
_init_onchange:function(){} //need not ui.text logic
|
|
}, webix.ui.text);
|
|
|
|
|
|
|
|
|
|
/*
|
|
view.load("offline->some.php")
|
|
|
|
or
|
|
|
|
view.load( webix.proxy("offline", "some.php") );
|
|
|
|
or
|
|
|
|
view.load( webix.proxy("offline", "post->url.php") );
|
|
*/
|
|
|
|
webix.proxy.offline = {
|
|
$proxy:true,
|
|
|
|
storage: webix.storage.local,
|
|
cache:false,
|
|
data:"",
|
|
|
|
_is_offline : function(){
|
|
if (!this.cache && !webix.env.offline){
|
|
webix.call("onOfflineMode",[]);
|
|
webix.env.offline = true;
|
|
}
|
|
},
|
|
_is_online : function(){
|
|
if (!this.cache && webix.env.offline){
|
|
webix.env.offline = false;
|
|
webix.call("onOnlineMode", []);
|
|
}
|
|
},
|
|
|
|
load:function(view, callback){
|
|
var mycallback = {
|
|
error:function(){
|
|
//assuming offline mode
|
|
var text = this.getCache() || this.data;
|
|
|
|
var loader = { responseText: text };
|
|
var data = webix.ajax.prototype._data(loader);
|
|
|
|
this._is_offline();
|
|
webix.ajax.$callback(view, callback, text, data, loader);
|
|
},
|
|
success:function(text, data, loader){
|
|
this._is_online();
|
|
webix.ajax.$callback(view, callback, text, data, loader);
|
|
|
|
this.setCache(text);
|
|
}
|
|
};
|
|
|
|
//in cache mode - always load data from cache
|
|
if (this.cache && this.getCache())
|
|
mycallback.error.call(this);
|
|
else {
|
|
//else try to load actual data first
|
|
if (this.source.$proxy)
|
|
this.source.load(this, mycallback);
|
|
else
|
|
webix.ajax(this.source, mycallback, this);
|
|
}
|
|
},
|
|
getCache:function(){
|
|
return this.storage.get(this._data_name());
|
|
},
|
|
clearCache:function(){
|
|
this.storage.remove(this._data_name());
|
|
},
|
|
setCache:function(text){
|
|
this.storage.put(this._data_name(), text);
|
|
},
|
|
_data_name:function(){
|
|
if (this.source.$proxy)
|
|
return this.source.source + "_$proxy$_data";
|
|
else
|
|
return this.source + "_$proxy$_data";
|
|
},
|
|
saveAll:function(view, update, dp, callback){
|
|
this.setCache(view.serialize());
|
|
webix.ajax.$callback(view, callback, "", update);
|
|
},
|
|
result:function(id, master, dp, text, data){
|
|
for (var i = 0; i < data.length; i++)
|
|
dp.processResult({ id: data[i].id, status: data[i].operation }, {}, {});
|
|
}
|
|
};
|
|
|
|
webix.proxy.cache = {
|
|
init:function(){
|
|
webix.extend(this, webix.proxy.offline);
|
|
},
|
|
cache:true
|
|
};
|
|
|
|
webix.proxy.local = {
|
|
init:function(){
|
|
webix.extend(this, webix.proxy.offline);
|
|
},
|
|
cache:true,
|
|
data:[]
|
|
};
|
|
|
|
if (window.angular)
|
|
|
|
(function(){
|
|
|
|
function id_helper($element){
|
|
//we need uniq id as reference
|
|
var id = $element.attr("id");
|
|
if (!id){
|
|
id = webix.uid();
|
|
$element.attr("id", id);
|
|
}
|
|
return id;
|
|
}
|
|
|
|
function locate_view_id($element){
|
|
if (typeof $element.attr("webix-ui") != "undefined")
|
|
return $element.attr("id");
|
|
return locate_view_id($element.parent());
|
|
}
|
|
|
|
|
|
|
|
|
|
//creates webix ui components
|
|
angular.module("webix", [])
|
|
.directive('webixUi', [ "$parse", function($parse) {
|
|
return {
|
|
restrict: 'A',
|
|
scope: false,
|
|
link:function ($scope, $element, $attrs, $controller){
|
|
var dataname = $attrs["webixUi"];
|
|
var callback = $attrs["webixReady"];
|
|
var watch = $attrs["webixWatch"];
|
|
var wxRoot = null;
|
|
var id = id_helper($element);
|
|
|
|
$element.ready(function(){
|
|
if (wxRoot) return;
|
|
|
|
if (callback)
|
|
callback = $parse(callback);
|
|
|
|
//destruct components
|
|
$element.bind('$destroy', function() {
|
|
if(wxRoot) wxRoot.destructor();
|
|
});
|
|
|
|
//webix-ui attribute has some value - will try to use it as configuration
|
|
if (dataname){
|
|
//configuration
|
|
var watcher = function(data){
|
|
if (wxRoot) wxRoot.destructor();
|
|
if ($scope[dataname]){
|
|
var config = webix.copy($scope[dataname]);
|
|
config.$scope =$scope;
|
|
$element[0].innerHTML = "";
|
|
wxRoot = webix.ui(config, $element[0]);
|
|
if (callback)
|
|
callback($scope, { root: wxRoot });
|
|
}
|
|
};
|
|
if (watch !== "false")
|
|
$scope.$watch(dataname, watcher);
|
|
watcher();
|
|
} else {
|
|
//if webix-ui is empty - init inner content as webix markup
|
|
if (!$attrs["view"])
|
|
$element.attr("view", "rows");
|
|
|
|
var ui = webix.markup;
|
|
var tmp_a = ui.attribute; ui.attribute = "";
|
|
//FIXME - memory leaking, need to detect the moment of dom element removing and destroy UI
|
|
if (typeof $attrs["webixRefresh"] != "undefined")
|
|
wxRoot = ui.init($element[0], $element[0], $scope);
|
|
else
|
|
wxRoot = ui.init($element[0], null, $scope);
|
|
|
|
ui.attribute = tmp_a;
|
|
|
|
if (callback)
|
|
callback($scope, { root: wxRoot });
|
|
}
|
|
|
|
//size of ui
|
|
$scope.$watch(function() {
|
|
return $element[0].offsetWidth + "." + $element[0].offsetHeight;
|
|
}, function() {
|
|
if (wxRoot) wxRoot.adjust();
|
|
});
|
|
|
|
});
|
|
}
|
|
};
|
|
}])
|
|
|
|
.directive('webixShow', [ "$parse", function($parse) {
|
|
return {
|
|
restrict: 'A',
|
|
scope: false,
|
|
|
|
link:function ($scope, $element, $attrs, $controller){
|
|
var attr = $parse($attrs["webixShow"]);
|
|
var id = id_helper($element);
|
|
|
|
if (!attr($scope))
|
|
$element.attr("hidden", "true");
|
|
|
|
$scope.$watch($attrs["webixShow"], function(){
|
|
var view = webix.$$(id);
|
|
if (view){
|
|
if (attr($scope)){
|
|
webix.$$(id).show();
|
|
$element[0].removeAttribute("hidden");
|
|
} else
|
|
webix.$$(id).hide();
|
|
}
|
|
});
|
|
|
|
}
|
|
};
|
|
}])
|
|
|
|
.directive('webixEvent', [ "$parse", function($parse) {
|
|
var wrap_helper = function($scope, view, eventobj){
|
|
var ev = eventobj.split("=");
|
|
var action = $parse(ev[1]);
|
|
var name = ev[0].trim();
|
|
view.attachEvent(name, function(){
|
|
return action($scope, { id:arguments[0], details:arguments });
|
|
});
|
|
};
|
|
|
|
return {
|
|
restrict: 'A',
|
|
scope: false,
|
|
|
|
link:function ($scope, $element, $attrs, $controller){
|
|
var events = $attrs["webixEvent"].split(";");
|
|
var id = id_helper($element);
|
|
|
|
setTimeout(function(){
|
|
var first = $element[0].firstChild;
|
|
if (first && first.nodeType == 1)
|
|
id = first.getAttribute("view_id") || id;
|
|
|
|
var view = webix.$$(id);
|
|
for (var i = 0; i < events.length; i++) {
|
|
wrap_helper($scope, view, events[i]);
|
|
}
|
|
});
|
|
|
|
}
|
|
};
|
|
}])
|
|
|
|
.directive('webixElements', [ "$parse", function($parse) {
|
|
return {
|
|
restrict: 'A',
|
|
scope: false,
|
|
|
|
link:function ($scope, $element, $attrs, $controller){
|
|
|
|
var data = $attrs["webixElements"];
|
|
var id = id_helper($element);
|
|
|
|
if ($scope.$watchCollection)
|
|
$scope.$watchCollection(data, function(collection){
|
|
setTimeout(function(){
|
|
var view = webix.$$(id);
|
|
if (view){
|
|
view.define("elements", collection);
|
|
view.refresh();
|
|
}
|
|
},1);
|
|
});
|
|
}
|
|
|
|
};
|
|
}])
|
|
|
|
.directive('webixData', [ "$parse", function($parse) {
|
|
return {
|
|
restrict: 'A',
|
|
scope: false,
|
|
|
|
link:function ($scope, $element, $attrs, $controller){
|
|
|
|
var data = $attrs["webixData"];
|
|
var id = id_helper($element);
|
|
|
|
if ($scope.$watchCollection)
|
|
$scope.$watchCollection(data, function(collection){
|
|
if (collection){
|
|
setTimeout(function(){
|
|
loadData($element, id, collection, 0);
|
|
},1);
|
|
}
|
|
});
|
|
}
|
|
|
|
};
|
|
}]);
|
|
|
|
function loadData($element, id, collection, num){
|
|
if (num > 10) return;
|
|
var first = $element[0].firstChild;
|
|
if (first && first.nodeType == 1)
|
|
id = first.getAttribute("view_id") || id;
|
|
|
|
var view = webix.$$(id);
|
|
if (view){
|
|
if (view.options_setter){
|
|
view.define("options", collection);
|
|
view.refresh();
|
|
}else{
|
|
if (view.clearAll)
|
|
view.clearAll();
|
|
view.parse(collection);
|
|
}
|
|
} else {
|
|
webix.delay(loadData, this, [$element, id, collection], 100, num+1);
|
|
}
|
|
}
|
|
|
|
})();
|
|
if (window.Backbone)
|
|
(function(){
|
|
|
|
var cfg = {
|
|
use_id : false
|
|
};
|
|
|
|
function _start_ext_load(cal){
|
|
cal._backbone_loading = true;
|
|
cal.callEvent("onBeforeLoad", []);
|
|
cal.blockEvent();
|
|
}
|
|
function _finish_ext_load(cal){
|
|
cal.unblockEvent();
|
|
cal._backbone_loading = false;
|
|
cal.refresh();
|
|
}
|
|
|
|
webix.attachEvent("onUnSyncUnknown", function(wData, bData){
|
|
var whandlers = wData._sync_events;
|
|
var handlers = wData._sync_backbone_events;
|
|
|
|
for (var i = 0; i < whandlers.length; i++)
|
|
wData.detachEvent(whandlers[i]);
|
|
|
|
for (var i = 0; i < handlers.length; i++)
|
|
bData.off.apply(bData, handlers[i]);
|
|
});
|
|
|
|
webix.attachEvent("onSyncUnknown", function(wData, bData, config){
|
|
if (config) cfg = config;
|
|
if (cfg.get && typeof cfg.get == "string")
|
|
cfg.get = cfg.get.split(",");
|
|
|
|
//remove private properties
|
|
function sanitize(ev){
|
|
if (cfg.use_id)
|
|
return ev;
|
|
|
|
var obj = {};
|
|
for (var key in ev)
|
|
if (key != "id")
|
|
obj[key] = ev[key];
|
|
|
|
return obj;
|
|
}
|
|
|
|
function _get_id(model){
|
|
return cfg.use_id ? model.id : model.cid;
|
|
}
|
|
|
|
function datareset(wData, bData){
|
|
var data = [];
|
|
for (var i = 0; i < bData.models.length; i++){
|
|
var model = bData.models[i];
|
|
var cid = _get_id(model);
|
|
var ev = copymodel(model);
|
|
ev.id = cid;
|
|
data.push(ev);
|
|
}
|
|
wData.clearAll();
|
|
wData._parse(data);
|
|
}
|
|
|
|
function copymodel(model){
|
|
if (cfg.get){
|
|
var data = {};
|
|
for (var i = 0; i < cfg.get.length; i++){
|
|
var key = cfg.get[i];
|
|
data[key] = model.get(key);
|
|
}
|
|
return data;
|
|
}
|
|
return model.toJSON();
|
|
}
|
|
|
|
var handlers = [
|
|
["change", function(model, info){
|
|
var cid = _get_id(model);
|
|
var ev = wData.pull[cid] = copymodel(model);
|
|
ev.id = cid;
|
|
|
|
if (wData._scheme_update)
|
|
wData._scheme_update(ev);
|
|
wData.refresh(ev.id);
|
|
}],
|
|
["remove", function(model, changes){
|
|
var cid = _get_id(model);
|
|
if (wData.pull[cid])
|
|
wData.remove(cid);
|
|
}],
|
|
["add", function(model, changes){
|
|
var cid = _get_id(model);
|
|
if (!wData.pull[cid]){
|
|
var ev = copymodel(model);
|
|
ev.id = cid;
|
|
if (wData._scheme_init)
|
|
wData._scheme_init(ev);
|
|
wData.add(ev);
|
|
}
|
|
}],
|
|
["reset", function(model, changes){
|
|
datareset(wData, bData);
|
|
}],
|
|
["request", function(obj){
|
|
if (obj instanceof Backbone.Collection)
|
|
_start_ext_load(wData);
|
|
}],
|
|
["sync", function(obj){
|
|
if (obj instanceof Backbone.Collection)
|
|
_finish_ext_load(wData);
|
|
}],
|
|
["error", function(obj){
|
|
if (obj instanceof Backbone.Collection)
|
|
_finish_ext_load(wData);
|
|
}]
|
|
];
|
|
|
|
for (var i = 0; i < handlers.length; i++)
|
|
bData.bind.apply(bData, handlers[i]);
|
|
|
|
|
|
var whandlers = [
|
|
wData.attachEvent("onAfterAdd", function(id){
|
|
if (!bData.get(id)){
|
|
var data = sanitize(wData.getItem(id));
|
|
var model = new bData.model(data);
|
|
|
|
var cid = _get_id(model);
|
|
if (cid != id)
|
|
this.changeId(id, cid);
|
|
|
|
bData.add(model);
|
|
bData.trigger("webix:add", model);
|
|
}
|
|
return true;
|
|
}),
|
|
wData.attachEvent("onDataUpdate", function(id){
|
|
var ev = bData.get(id);
|
|
var upd = sanitize(wData.getItem(id));
|
|
|
|
ev.set(upd);
|
|
bData.trigger("webix:change", ev);
|
|
|
|
return true;
|
|
}),
|
|
wData.attachEvent("onAfterDelete", function(id){
|
|
var model = bData.get(id);
|
|
if (model){
|
|
bData.trigger("webix:remove", model);
|
|
bData.remove(id);
|
|
}
|
|
return true;
|
|
})
|
|
];
|
|
|
|
wData._sync_source = bData;
|
|
wData._sync_events = whandlers;
|
|
wData._sync_backbone_events = handlers;
|
|
|
|
if (bData.length || wData.count()){
|
|
datareset(wData, bData);
|
|
}
|
|
});
|
|
|
|
window.WebixView = Backbone.View.extend({
|
|
//starting from backbone 1.1, this.options is not saved automatically
|
|
initialize : function (options) {
|
|
this.options = options || {};
|
|
},
|
|
render:function(){
|
|
if (this.beforeRender) this.beforeRender.apply(this, arguments);
|
|
|
|
var config = this.config || this.options.config;
|
|
var el;
|
|
|
|
if (!config.view || !webix.ui.hasMethod(config.view, "setPosition")){
|
|
el = window.$ ? $(this.el)[0] : this.el;
|
|
//clear previous content if any
|
|
if (el && !el.config) el.innerHTML = "";
|
|
}
|
|
|
|
var ui = webix.copy(config);
|
|
ui.$scope = this;
|
|
this.root = webix.ui(ui, el);
|
|
|
|
if (this.afterRender) this.afterRender.apply(this, arguments);
|
|
return this;
|
|
},
|
|
destroy:function(){
|
|
if (this.root) this.root.destructor();
|
|
},
|
|
getRoot:function(){
|
|
return this.root;
|
|
},
|
|
getChild:function(id){
|
|
webix.assert(this.root.$$, "You need to set isolate property for top view");
|
|
return this.root.$$(id);
|
|
}
|
|
});
|
|
|
|
})();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
webix.ActiveContent = {
|
|
$init:function(config){
|
|
if (config.activeContent){
|
|
this.$ready.push(this._init_active_content_list);
|
|
|
|
this._active_holders = {};
|
|
this._active_holders_item = {};
|
|
this._active_holders_values = {};
|
|
this._active_references = {};
|
|
|
|
for (var key in config.activeContent){
|
|
this[key] = this._bind_active_content(key);
|
|
if (config.activeContent[key].earlyInit){
|
|
var temp = webix._parent_cell; webix._parent_cell = null;
|
|
this[key].call(this,{},this, config.activeContent);
|
|
webix._parent_cell=temp;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
_init_active_content_list:function(){
|
|
webix.event(this.$view, "blur", function(ev){
|
|
var target = ev.target || ev.srcElement;
|
|
|
|
// for inputs only
|
|
if(target.tagName != "BUTTON"){
|
|
var el = webix.$$(ev);
|
|
if (el !== this && el.getValue && el.setValue){
|
|
el.getNode(ev);
|
|
|
|
var newvalue = el.getValue();
|
|
if (newvalue != el._settings.value)
|
|
el.setValue(newvalue);
|
|
}
|
|
}
|
|
}, {bind:this, capture: true});
|
|
|
|
if (this.filter){
|
|
for (var key in this._settings.activeContent){
|
|
this.type[key] = this[key];
|
|
this[key] = this._locate_active_content_by_id(key);
|
|
}
|
|
//really bad!
|
|
this.attachEvent("onBeforeRender", function(){
|
|
this.type.masterUI = this;
|
|
});
|
|
this.type.masterUI = this;
|
|
}
|
|
},
|
|
_locate_active_content_by_id:function(key){
|
|
return function(id){
|
|
var button = this._active_references[key];
|
|
var button_id = button._settings.id;
|
|
var html = this.getItemNode(id).getElementsByTagName("DIV");
|
|
for (var i=0; i < html.length; i++) {
|
|
if (html[i].getAttribute("view_id") == button_id){
|
|
button._viewobj = button._dataobj = html[i];
|
|
break;
|
|
}
|
|
}
|
|
return button;
|
|
};
|
|
},
|
|
_get_active_node:function(el, key, master){
|
|
return function(e){
|
|
if (e){
|
|
var trg=e.target||e.srcElement;
|
|
while (trg){
|
|
if (trg.getAttribute && trg.getAttribute("view_id")){
|
|
el._dataobj = el._viewobj = el.$view = trg;
|
|
if (master.locate){
|
|
var id = master.locate(trg.parentNode);
|
|
var value = master._active_holders_values[key][id];
|
|
el._settings.value = value;
|
|
el._settings.$masterId = id;
|
|
}
|
|
return trg;
|
|
}
|
|
trg = trg.parentNode;
|
|
}
|
|
}
|
|
return el._viewobj;
|
|
};
|
|
},
|
|
_set_new_active_value:function(key, master){
|
|
return function(value){
|
|
var data = master.data;
|
|
if (master.filter){
|
|
var id = master.locate(this._viewobj.parentNode);
|
|
data = master.getItem(id);
|
|
//XMLSerializer - FF "feature"
|
|
this.refresh();
|
|
master._active_holders_item[key][id]=this._viewobj.outerHTML||(new XMLSerializer().serializeToString(this._viewobj));
|
|
master._active_holders_values[key][id] = value;
|
|
}
|
|
data[key] = value;
|
|
};
|
|
},
|
|
_bind_active_content:function(key){
|
|
return function(obj, common, active){
|
|
var object = common._active_holders?common:common.masterUI;
|
|
|
|
if (!object._active_holders[key]){
|
|
var d = document.createElement("DIV");
|
|
|
|
active = active || object._settings.activeContent;
|
|
var el = webix.ui(active[key], d);
|
|
d.firstChild.setAttribute("onclick", "event.processed = true; if (webix.env.isIE8) event.srcElement.w_view = '"+el._settings.id+"';");
|
|
|
|
el.getNode = object._get_active_node(el, key, object);
|
|
|
|
el.attachEvent("onChange", object._set_new_active_value(key, object));
|
|
|
|
object._active_references[key] = el;
|
|
object._active_holders[key] = d.innerHTML;
|
|
object._active_holders_item[key] = {};
|
|
object._active_holders_values[key] = {};
|
|
}
|
|
if (object.filter && obj[key] != object._active_holders_values[key] && !webix.isUndefined(obj[key])){
|
|
var el = object._active_references[key];
|
|
el.blockEvent();
|
|
//in IE we can lost content of active element during parent repainting
|
|
if (!el.$view.firstChild) el.refresh();
|
|
el.setValue(obj[key]);
|
|
el.refresh();
|
|
el.unblockEvent();
|
|
|
|
object._active_holders_values[key][obj.id] = obj[key];
|
|
object._active_holders_item[key][obj.id] = el._viewobj.outerHTML||(new XMLSerializer().serializeToString(el._viewobj));
|
|
}
|
|
|
|
return object._active_holders_item[key][obj.id]||object._active_holders[key];
|
|
};
|
|
}
|
|
};
|
|
webix.ProgressBar = {
|
|
$init:function(){
|
|
if (webix.isUndefined(this._progress) && this.attachEvent){
|
|
this.attachEvent("onBeforeLoad", this.showProgress);
|
|
this.attachEvent("onAfterLoad", this.hideProgress);
|
|
this._progress = null;
|
|
}
|
|
},
|
|
showProgress:function(config){
|
|
// { position: 0 - 1, delay: 2000ms by default, css : name of css class to use }
|
|
if (!this._progress){
|
|
|
|
config = webix.extend({
|
|
position:0,
|
|
delay: 2000,
|
|
type:"icon",
|
|
icon:"refresh",
|
|
hide:false
|
|
}, (config||{}), true);
|
|
|
|
var incss = (config.type == "icon") ? ("fa-"+config.icon+" fa-spin") : "";
|
|
|
|
|
|
|
|
this._progress = webix.html.create(
|
|
"DIV",
|
|
{ "class":"webix_progress_"+config.type},
|
|
"<div class='webix_progress_state "+incss+"'></div>"
|
|
);
|
|
|
|
if(!this.setPosition)
|
|
this._viewobj.style.position = "relative";
|
|
|
|
webix.html.insertBefore(this._progress, this._viewobj.firstChild, this._viewobj);
|
|
|
|
if(!webix.Touch.$active){
|
|
if(this.getScrollState){
|
|
var scroll = this.getScrollState();
|
|
if(this._viewobj.scrollWidth != this.$width){
|
|
this._progress.style.left = scroll.x +"px";
|
|
}
|
|
if(this._viewobj.scrollHeight != this.$height){
|
|
if(config.type != "bottom"){
|
|
this._progress.style.top = scroll.y +"px";
|
|
} else {
|
|
this._progress.style.top = scroll.y + this.$height - this._progress.offsetHeight +"px";
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
this._progress_delay = 1;
|
|
}
|
|
|
|
if (config && config.type != "icon")
|
|
webix.delay(function(){
|
|
if (this._progress){
|
|
var position = config.position || 1;
|
|
//check for css-transition support
|
|
if(this._progress.style[webix.env.transitionDuration] !== webix.undefined || !config.delay){
|
|
this._progress.firstChild.style.width = position*100+"%";
|
|
if (config.delay)
|
|
this._progress.firstChild.style[webix.env.transitionDuration] = config.delay+"ms";
|
|
} else{
|
|
//if animation is not supported fallback to timeouts [IE9]
|
|
var count = 0,
|
|
start = 0,
|
|
step = position/config.delay*30,
|
|
view = this;
|
|
|
|
if(this._progressTimer){
|
|
//reset the existing progress
|
|
window.clearInterval(this._progressTimer);
|
|
start = this._progress.firstChild.offsetWidth/this._progress.offsetWidth*100;
|
|
}
|
|
this._progressTimer = window.setInterval(function(){
|
|
if(count*30 == config.delay){
|
|
window.clearInterval(view._progressTimer);
|
|
}
|
|
else{
|
|
if(view._progress && view._progress.firstChild)
|
|
view._progress.firstChild.style.width = start+count*step*position*100+"%";
|
|
count++;
|
|
}
|
|
},30);
|
|
}
|
|
|
|
if (config.hide)
|
|
webix.delay(this.hideProgress, this, [1], config.delay);
|
|
|
|
}
|
|
this._progress_delay = 0;
|
|
}, this);
|
|
|
|
},
|
|
hideProgress:function(now){
|
|
if (this._progress_delay)
|
|
now = true;
|
|
|
|
if (this._progress){
|
|
if (now){
|
|
if(this._progressTimer)
|
|
window.clearInterval(this._progressTimer);
|
|
webix.html.remove(this._progress);
|
|
this._progress = null;
|
|
} else {
|
|
this.showProgress({ position:1.1, delay:300 , hide:true });
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
/*
|
|
UI:Video
|
|
*/
|
|
|
|
webix.protoUI({
|
|
name:"video",
|
|
$init:function(config){
|
|
if (!config.id) config.id = webix.uid();
|
|
this.$ready.push(this._init_video);
|
|
},
|
|
_init_video:function(){
|
|
var c = this._settings;
|
|
this._contentobj = webix.html.create("video",{
|
|
"class":"webix_view_video",
|
|
"style":"width:100%;height:100%;",
|
|
"autobuffer":"autobuffer"
|
|
},"");
|
|
if(c.poster)
|
|
this._contentobj.poster=c.poster;
|
|
|
|
if(c.src){
|
|
if(typeof c.src!= "object")
|
|
c.src = [c.src];
|
|
for(var i = 0; i < c.src.length;i++)
|
|
this._contentobj.innerHTML += ' <source src="'+ c.src[i]+'">';
|
|
}
|
|
/*if(this._contentobj.addEventListener)
|
|
this._contentobj.addEventListener('click', function(videoNode) {
|
|
return function() {
|
|
videoNode.play();
|
|
};
|
|
}(this._contentobj),false); */
|
|
|
|
if(c.controls)
|
|
this._contentobj.controls=true;
|
|
if(c.autoplay)
|
|
this._contentobj.autoplay=true;
|
|
this._viewobj.appendChild(this._contentobj);
|
|
},
|
|
getVideo:function(){
|
|
return this._contentobj;
|
|
},
|
|
defaults:{
|
|
src:"",
|
|
controls: true
|
|
}
|
|
}, webix.ui.view);
|
|
|
|
webix.protoUI({
|
|
name:"NonGPL",
|
|
$init:function(){
|
|
webix.message("GPL version does not support '"+this.name+"'","error",-1);
|
|
}
|
|
},webix.ui.view);
|
|
|
|
webix.protoUI({ name:"organogram" },webix.ui.NonGPL);
|
|
webix.protoUI({ name:"barcode" },webix.ui.NonGPL);
|
|
webix.protoUI({ name:"portlet" },webix.ui.NonGPL);
|
|
webix.protoUI({ name:"pdfviewer" },webix.ui.NonGPL);
|
|
webix.protoUI({ name:"pdfbar" },webix.ui.NonGPL);
|
|
webix.protoUI({ name:"excelviewer" },webix.ui.NonGPL);
|
|
webix.protoUI({ name:"excelbar" },webix.ui.NonGPL);
|
|
webix.protoUI({ name:"datasuggest" },webix.ui.NonGPL);
|
|
webix.protoUI({ name:"gridsuggest" },webix.ui.NonGPL);
|
|
webix.protoUI({ name:"multitext" },webix.ui.NonGPL);
|
|
webix.protoUI({ name:"multiselect" },webix.ui.NonGPL);
|
|
webix.protoUI({ name:"multicombo" },webix.ui.NonGPL);
|
|
webix.protoUI({ name:"multisuggest" },webix.ui.NonGPL);
|
|
webix.protoUI({ name:"checksuggest" },webix.ui.NonGPL);
|
|
webix.protoUI({ name:"treemap" },webix.ui.NonGPL);
|
|
webix.protoUI({ name:"rangeslider" },webix.ui.NonGPL);
|
|
webix.protoUI({ name:"rangechart" },webix.ui.NonGPL);
|
|
webix.protoUI({ name:"datalayout" },webix.ui.NonGPL);
|
|
webix.protoUI({ name:"abslayout" },webix.ui.NonGPL);
|
|
|
|
|
|
webix.protoUI({
|
|
name:"sidemenu",
|
|
defaults: {
|
|
padding:0,
|
|
animate: true,
|
|
position: "left",
|
|
width: 200,
|
|
borderless: true
|
|
},
|
|
$init:function(){
|
|
this.$view.className += " webix_sidemenu";
|
|
},
|
|
position_setter: function(value){
|
|
var prevPosition = this._settings.position;
|
|
if(prevPosition)
|
|
webix.html.removeCss(this.$view," webix_sidemenu_"+prevPosition);
|
|
webix.html.addCss(this.$view," webix_sidemenu_"+value);
|
|
return value;
|
|
},
|
|
$getSize: function(){
|
|
var sizes = webix.ui.window.prototype.$getSize.apply(this,arguments);
|
|
this._desired_sizes = sizes;
|
|
return sizes;
|
|
},
|
|
$setSize:function(x,y){
|
|
webix.ui.view.prototype.$setSize.call(this,x,y);
|
|
x = this._content_width-this._settings.padding*2;
|
|
y = this._content_height-this._settings.padding*2;
|
|
this._contentobj.style.padding = this._settings.padding+"px";
|
|
this._headobj.style.display="none";
|
|
this._bodyobj.style.height = y+"px";
|
|
this._body_cell.$setSize(x,y);
|
|
},
|
|
show: function(){
|
|
if(!this.callEvent("onBeforeShow",arguments))
|
|
return false;
|
|
|
|
this._settings.hidden = false;
|
|
this._viewobj.style.zIndex = (this._settings.zIndex||webix.ui.zIndex());
|
|
if (this._settings.modal || this._modal){
|
|
this._modal_set(true);
|
|
this._modal = null; // hidden_setter handling
|
|
}
|
|
this._viewobj.style.display = "block";
|
|
this._render_hidden_views();
|
|
if (this._settings.position)
|
|
this._setPosition();
|
|
|
|
this._hide_timer = 1;
|
|
webix.delay(function(){ this._hide_timer = 0; }, this, [], (webix.env.touch ? 400 : 100 ));
|
|
|
|
if (this.config.autofocus){
|
|
this._prev_focus = webix.UIManager.getFocus();
|
|
webix.UIManager.setFocus(this);
|
|
}
|
|
|
|
if (-1 == webix.ui._popups.find(this))
|
|
webix.ui._popups.push(this);
|
|
|
|
this.callEvent("onShow",[]);
|
|
},
|
|
_setPosition: function(x){
|
|
var width, height, maxWidth, maxHeight,
|
|
position,
|
|
left = 0, top = 0,
|
|
state = { };
|
|
|
|
|
|
this.$view.style.position = "fixed";
|
|
|
|
maxWidth = (window.innerWidth||document.documentElement.offsetWidth);
|
|
maxHeight = (window.innerHeight||document.documentElement.offsetHeight);
|
|
|
|
width = this._desired_sizes[0] || maxWidth;
|
|
height = this._desired_sizes[2] ||maxHeight;
|
|
|
|
webix.assert(width &&height, "Attempt to show not rendered window");
|
|
|
|
position = this._settings.position;
|
|
|
|
if(position == "top"){
|
|
width = maxWidth;
|
|
} else if(position == "right"){
|
|
height = maxHeight;
|
|
left = maxWidth - width;
|
|
} else if(position == "bottom"){
|
|
width = maxWidth;
|
|
top = maxHeight - height;
|
|
} else {
|
|
height = maxHeight;
|
|
}
|
|
|
|
state = { left: left, top: top,
|
|
width: width, height: height,
|
|
maxWidth: maxWidth, maxHeight: maxHeight
|
|
};
|
|
|
|
if (typeof this._settings.state == "function")
|
|
this._settings.state.call(this, state);
|
|
|
|
this._state = state;
|
|
|
|
this.$setSize(state.width, state.height);
|
|
|
|
if (typeof x == "undefined" && this._isAnimationSupported()){
|
|
webix.html.removeCss(this.$view,"webix_animate",true);
|
|
// set initial state
|
|
this._animate[this._settings.position].beforeShow.call(this, state);
|
|
// set apply animation css
|
|
webix.delay(function(){
|
|
webix.html.addCss(this.$view,"webix_animate",true);
|
|
},this, null,1);
|
|
// animate popup
|
|
webix.delay(function(){
|
|
this._animate[this._settings.position].show.call(this, state);
|
|
},this, null,10);
|
|
|
|
}
|
|
else{
|
|
|
|
this.setPosition(state.left, state.top);
|
|
}
|
|
},
|
|
_isAnimationSupported: function(){
|
|
return webix.animate.isSupported() && this._settings.animate && !(webix.env.isIE && navigator.appVersion.indexOf("MSIE 9")!=-1);
|
|
},
|
|
hidden_setter:function(value){
|
|
if(value)
|
|
this.hide(true);
|
|
else
|
|
this.show();
|
|
return !!value;
|
|
},
|
|
_animate:{
|
|
left: {
|
|
beforeShow: function(state){
|
|
this.$view.style.left = -state.width+"px";
|
|
this.$view.style.top = state.top+"px";
|
|
},
|
|
show: function(){
|
|
this.$view.style.left = "0px";
|
|
},
|
|
hide: function(state){
|
|
this.$view.style.left = -state.width+"px";
|
|
}
|
|
},
|
|
right: {
|
|
beforeShow: function(state){
|
|
this.$view.style.left = "auto";
|
|
this.$view.style.right = -state.width+"px";
|
|
this.$view.style.top = state.top+"px";
|
|
},
|
|
show: function(){
|
|
this.$view.style.right = 0 +"px";
|
|
},
|
|
hide: function(state){
|
|
this.$view.style.right = -state.width+"px";
|
|
}
|
|
},
|
|
top: {
|
|
beforeShow: function(state){
|
|
this.setPosition(state.left,state.top);
|
|
this.$view.style.height ="0px";
|
|
this._bodyobj.style.height ="0px";
|
|
},
|
|
show: function(state){
|
|
this.$view.style.height = state.height +"px";
|
|
this._bodyobj.style.height =state.height+"px";
|
|
},
|
|
hide: function(){
|
|
this.$view.style.height = "0px";
|
|
this._bodyobj.style.height = "0px";
|
|
}
|
|
},
|
|
bottom: {
|
|
beforeShow: function(state){
|
|
this.$view.style.left = state.left + "px";
|
|
this.$view.style.top = "auto";
|
|
var bottom = (state.bottom != webix.undefined?state.bottom:(state.maxHeight-state.top -state.height));
|
|
this.$view.style.bottom = bottom +"px";
|
|
this.$view.style.height ="0px";
|
|
},
|
|
show: function(state){
|
|
this.$view.style.height = state.height +"px";
|
|
},
|
|
hide: function(){
|
|
this.$view.style.height = "0px";
|
|
}
|
|
}
|
|
},
|
|
hide:function(force){
|
|
|
|
if (this.$destructed) return;
|
|
|
|
if (this._settings.modal)
|
|
this._modal_set(false);
|
|
|
|
var maxWidth = (window.innerWidth||document.documentElement.offsetWidth);
|
|
var maxHeight = (window.innerHeight||document.documentElement.offsetHeight);
|
|
|
|
if (!force && this._isAnimationSupported() && maxWidth == this._state.maxWidth && maxHeight == this._state.maxHeight){
|
|
// call 'hide' animation handler
|
|
this._animate[this._settings.position].hide.call(this, this._state);
|
|
// hide popup
|
|
var tid = webix.event(this.$view, webix.env.transitionEnd, webix.bind(function(ev){
|
|
this._hide_callback();
|
|
webix.eventRemove(tid);
|
|
},this));
|
|
}
|
|
else{
|
|
this._hide_callback();
|
|
}
|
|
|
|
if (this._settings.autofocus){
|
|
var el = document.activeElement;
|
|
if (el && this._viewobj && this._viewobj.contains(el)){
|
|
webix.UIManager.setFocus(this._prev_focus);
|
|
this._prev_focus = null;
|
|
}
|
|
}
|
|
|
|
this._hide_sub_popups();
|
|
|
|
}
|
|
|
|
}, webix.ui.popup);
|
|
|
|
|
|
|
|
(function(){
|
|
|
|
webix.toPNG = function(id, name){
|
|
var defer = webix.promise.defer();
|
|
webix.require(webix.cdn + "/extras/html2canvas.min.js", function(){
|
|
var view = webix.$$(id);
|
|
if (view && view.$exportView)
|
|
view = view.$exportView({});
|
|
var node = view ? view.$view : webix.toNode(id);
|
|
var filename = (name||"data")+".png";
|
|
|
|
window.html2canvas(node).then(function(canvas) {
|
|
var data = canvas.msToBlob?canvas.msToBlob():canvas.toDataURL("image/png");
|
|
webix.html.download(data, filename);
|
|
canvas.remove();
|
|
defer.resolve();
|
|
});
|
|
});
|
|
return defer;
|
|
};
|
|
|
|
|
|
webix.toExcel = function(id, options){
|
|
var defer = webix.promise.defer();
|
|
var view = webix.$$(id);
|
|
options = options || {};
|
|
|
|
if (view.$exportView)
|
|
view = view.$exportView(options);
|
|
|
|
webix.require(webix.cdn + "/extras/xlsx.core.min.js", function(){
|
|
options._export_mode = "excel";
|
|
|
|
var scheme = getExportScheme(view, options);
|
|
var result = getExportData(view, options, scheme);
|
|
|
|
var spans = options.spans ? getSpans(view, options) : [];
|
|
var data = getExcelData(result, scheme, spans);
|
|
|
|
var wb = { SheetNames:[], Sheets:[]};
|
|
var name = options.name || "Data";
|
|
name = name.replace(/[\*\?\:\[\]\\\/]/g,"").substring(0, 31);
|
|
wb.SheetNames.push(name);
|
|
wb.Sheets[name] = data;
|
|
|
|
var xls = XLSX.write(wb, {bookType:'xlsx', bookSST:false, type: 'binary'});
|
|
var filename = (options.filename || name)+".xlsx";
|
|
|
|
var blob = new Blob([str2array(xls)], { type: "application/xlsx" });
|
|
webix.html.download(blob, filename);
|
|
defer.resolve();
|
|
});
|
|
return defer;
|
|
};
|
|
|
|
var font;
|
|
webix.toPDF = function(id, options){
|
|
var defer = webix.promise.defer();
|
|
webix.require(webix.cdn + "/extras/pdfjs.js", function(){
|
|
var view = webix.$$(id);
|
|
options = options || {};
|
|
|
|
if (view.$exportView)
|
|
view = view.$exportView(options);
|
|
|
|
options._export_mode = "pdf";
|
|
options._export_font = font;
|
|
|
|
var scheme = getExportScheme(view, options);
|
|
var data = getExportData(view, options, scheme);
|
|
|
|
var callback = function(pdf, options){
|
|
var filename = (options.filename || "data")+".pdf";
|
|
var blob = new Blob([pdf.toString()], { type: "application/pdf" });
|
|
webix.html.download(blob, filename);
|
|
defer.resolve();
|
|
};
|
|
|
|
if(options._export_font)
|
|
getPdfData(scheme, data, options, callback);
|
|
else
|
|
pdfjs.load(webix.cdn + "/extras/pt-sans.regular.ttf", function(err, buf){
|
|
if(err) throw err;
|
|
font = options._export_font = new pdfjs.TTFFont(buf);
|
|
getPdfData(scheme, data, options, callback);
|
|
});
|
|
});
|
|
return defer;
|
|
};
|
|
|
|
|
|
|
|
function getExportScheme(view, options){
|
|
var scheme = [];
|
|
var h_count = 0, f_count = 0;
|
|
var isTable = view.getColumnConfig;
|
|
var columns = options.columns;
|
|
var raw = !!options.rawValues;
|
|
|
|
if (!columns){
|
|
if (isTable){
|
|
columns = view._columns_pull;
|
|
}
|
|
else {
|
|
columns = webix.copy(view.data.pull[view.data.order[0]]);
|
|
for (var key in columns) columns[key] = true;
|
|
delete columns.id;
|
|
}
|
|
}
|
|
|
|
if (options.id)
|
|
scheme.push({ id:"id", width:50, header:" ", template:function(obj){ return obj.id; } });
|
|
|
|
for (var key in columns){
|
|
var column = columns[key];
|
|
if (column.noExport) continue;
|
|
|
|
if (isTable && view._columns_pull[key])
|
|
column = webix.extend(webix.extend({}, column), view._columns_pull[key]);
|
|
|
|
var record = {
|
|
id: column.id,
|
|
template: ( (raw ? null : column.template) || function(key){return function(obj){ return obj[key]; };}(key)),
|
|
width: ((column.width || 200) * (options._export_mode==="excel"?8.43/70:1 )),
|
|
header: (column.header!==false?(column.header||key) : "")
|
|
};
|
|
|
|
if(typeof record.header === "string") record.header = [{text:record.header}];
|
|
else record.header = webix.copy(record.header);
|
|
|
|
for(var i = 0; i<record.header.length; i++){
|
|
record.header[i] = record.header[i]?(record.header[i].contentId?"":record.header[i].text):"";
|
|
}
|
|
h_count = Math.max(h_count, record.header.length);
|
|
|
|
if(view._settings.footer){
|
|
var footer = column.footer || "";
|
|
if(typeof footer == "string") footer = [{text:footer}];
|
|
else footer = webix.copy(footer);
|
|
|
|
for(var i = 0; i<footer.length; i++){
|
|
if(footer[i]) footer[i] = footer[i].contentId?view.getHeaderContent(footer[i].contentId).getValue():footer[i].text;
|
|
else footer[i] = "";
|
|
}
|
|
record.footer = footer;
|
|
f_count = Math.max(f_count, record.footer.length);
|
|
}
|
|
|
|
scheme.push(record);
|
|
}
|
|
|
|
//normalize headers and footers
|
|
for(var i =0; i<scheme.length; i++){
|
|
|
|
var diff = h_count-scheme[i].header.length;
|
|
for(var d=0; d<diff; d++)
|
|
scheme[i].header.push("");
|
|
|
|
if(view._settings.footer){
|
|
diff = f_count-scheme[i].footer.length;
|
|
for(var d=0; d<diff; d++)
|
|
scheme[i].footer.push("");
|
|
}
|
|
}
|
|
|
|
return scheme;
|
|
}
|
|
|
|
function getExportData(view, options, scheme){
|
|
var filterHTML = !!options.filterHTML;
|
|
var htmlFilter = /<[^>]*>/gi;
|
|
var data = [];
|
|
var header, headers;
|
|
if( options.header !== false && scheme.length && options._export_mode === "excel"){
|
|
for(var h=0; h < scheme[0].header.length; h++){
|
|
headers = [];
|
|
for (var i = 0; i < scheme.length; i++){
|
|
header = "";
|
|
if(scheme[i].header[h])
|
|
header = scheme[i].header[h];
|
|
if (filterHTML)
|
|
header = header.replace(htmlFilter, "");
|
|
headers.push(header);
|
|
}
|
|
data.push(headers);
|
|
}
|
|
}
|
|
|
|
var isTree = (view.data.name == "TreeStore");
|
|
view.data.each(function(item){
|
|
var line = [];
|
|
for (var i = 0; i < scheme.length; i++){
|
|
var column = scheme[i];
|
|
var cell = column.template(item, view.type, item[column.id], column, i);
|
|
if (!cell && cell !== 0) cell = "";
|
|
if (filterHTML && typeof cell === "string"){
|
|
if(isTree)
|
|
cell = cell.replace(/<div class=.webix_tree_none.><\/div>/, " - ");
|
|
cell = cell.replace(htmlFilter, "");
|
|
}
|
|
line.push(cell);
|
|
}
|
|
data.push(line);
|
|
}, view);
|
|
|
|
|
|
if( options.footer !==false ){
|
|
var f_count = scheme[0].footer?scheme[0].footer.length:0;
|
|
for (var f = 0; f < f_count; f++){
|
|
var footers = [];
|
|
for(var i = 0; i<scheme.length; i++){
|
|
var footer = scheme[i].footer[f];
|
|
if (filterHTML) footer = footer.replace(htmlFilter, "");
|
|
footers.push(footer);
|
|
}
|
|
if(options._export_mode === "excel") data.push(footers);
|
|
}
|
|
}
|
|
|
|
return data;
|
|
}
|
|
|
|
function getColumnsWidths(scheme){
|
|
var wscols = [];
|
|
for (var i = 0; i < scheme.length; i++)
|
|
wscols.push({ wch: scheme[i].width });
|
|
|
|
return wscols;
|
|
}
|
|
|
|
function excelDate(date) {
|
|
return Math.round(25569 + date / (24 * 60 * 60 * 1000));
|
|
}
|
|
|
|
function getSpans(view, options){
|
|
var pull = view._spans_pull;
|
|
var spans = [];
|
|
|
|
if(pull){
|
|
//correction for spreadsheet
|
|
var xc = options.xCorrection || 0;
|
|
var yc = options.yCorrection || 0;
|
|
for(var row in pull){
|
|
//{ s:{c:1, r:0}, e:{c:3, r:0} }
|
|
var cols = pull[row];
|
|
for(var col in cols){
|
|
var sc = view.getColumnIndex(col) - xc;
|
|
var sr = view.getIndexById(row) - yc;
|
|
var ec = sc+cols[col][0]-1;
|
|
var er = sr+(cols[col][1]-1);
|
|
|
|
//+1 to exclude excel header
|
|
spans.push({ s:{c:sc, r:sr+1}, e:{c:ec, r:er+1} });
|
|
}
|
|
}
|
|
}
|
|
return spans;
|
|
}
|
|
|
|
var table = "_table";
|
|
function getExcelData(data, scheme, spans) {
|
|
var ws = {};
|
|
var range = {s: {c:10000000, r:10000000}, e: {c:0, r:0 }};
|
|
for(var R = 0; R != data.length; ++R) {
|
|
for(var C = 0; C != data[R].length; ++C) {
|
|
if(range.s.r > R) range.s.r = R;
|
|
if(range.s.c > C) range.s.c = C;
|
|
if(range.e.r < R) range.e.r = R;
|
|
if(range.e.c < C) range.e.c = C;
|
|
|
|
var cell = {v: data[R][C] };
|
|
if(cell.v === null) continue;
|
|
var cell_ref = XLSX.utils.encode_cell({c:C,r:R});
|
|
|
|
if(typeof cell.v === 'number') cell.t = 'n';
|
|
else if(typeof cell.v === 'boolean') cell.t = 'b';
|
|
else if(cell.v instanceof Date) {
|
|
cell.t = 'n'; cell.z = XLSX.SSF[table][14];
|
|
cell.v = excelDate(cell.v);
|
|
}
|
|
else cell.t = 's';
|
|
|
|
ws[cell_ref] = cell;
|
|
}
|
|
}
|
|
if(range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
|
|
|
|
ws['!cols'] = getColumnsWidths(scheme);
|
|
if(spans.length)
|
|
ws["!merges"] = spans;
|
|
return ws;
|
|
}
|
|
|
|
function str2array(s) {
|
|
var buf = new ArrayBuffer(s.length);
|
|
var view = new Uint8Array(buf);
|
|
for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
|
|
return buf;
|
|
}
|
|
|
|
function getPdfData(scheme, data, options, callback){
|
|
|
|
|
|
options.header = (webix.isUndefined(options.header) || options.header === true) ? {} : options.header;
|
|
options.footer = (webix.isUndefined(options.footer) || options.footer === true) ? {} : options.footer;
|
|
options.table = options.table || {};
|
|
|
|
var width = options.width||595.296, height = options.height || 841.896;// default A4 size
|
|
|
|
if(options.orientation && options.orientation ==="landscape")
|
|
height = [width, width = height][0];
|
|
|
|
if(options.autowidth){
|
|
width = 80; //paddings
|
|
for(var i = 0; i<scheme.length; i++)
|
|
width += scheme[i].width;
|
|
}
|
|
|
|
var doc = new pdfjs.Document({
|
|
padding: 40,
|
|
font: options._export_font,
|
|
threshold:256,
|
|
width:width,
|
|
height:height
|
|
});
|
|
|
|
|
|
//render table
|
|
var h_count = options.header === false ? 0: scheme[0].header.length;
|
|
var f_count = (options.footer === false || !scheme[0].footer) ? 0: scheme[0].footer.length;
|
|
|
|
var colWidths = [];
|
|
for(var i = 0; i<scheme.length; i++)
|
|
colWidths[i] = scheme[i].width;
|
|
|
|
var tableOps = webix.extend(options.table, {
|
|
borderWidth: 1,height:20, lineHeight:1.1,
|
|
borderColor: 0xEEEEEE, backgroundColor: 0xFFFFFF, color:0x666666,
|
|
textAlign:"left", paddingRight:10, paddingLeft:10,
|
|
headerRows:h_count, widths: colWidths.length?colWidths:["100%"]
|
|
});
|
|
|
|
var table = doc.table(tableOps);
|
|
|
|
//render table header
|
|
if(h_count){
|
|
var headerOps = webix.extend(options.header, {
|
|
borderRightColor:0xB0CEE3, borderBottomColor:0xB0CEE3,
|
|
color:0x4A4A4A, backgroundColor:0xD2E3EF,
|
|
height:27, lineHeight:1.2
|
|
});
|
|
|
|
for(var i = 0; i<h_count; i++){
|
|
var header = table.tr(headerOps);
|
|
for(var s=0; s<scheme.length; s++)
|
|
header.td(scheme[s].header[i].toString());
|
|
}
|
|
}
|
|
|
|
//render table data
|
|
for(var r=0; r<data.length;r++){
|
|
var row = table.tr({});
|
|
for(var c=0; c< data[r].length; c++)
|
|
row.td(data[r][c]);
|
|
}
|
|
|
|
//render table footer
|
|
if(f_count){
|
|
var footerOps = webix.extend(options.footer, {
|
|
borderRightColor:0xEEEEEE, borderBottomColor:0xEEEEEE,
|
|
backgroundColor: 0xFAFAFA, color:0x666666,
|
|
height:27, lineHeight:1.2
|
|
});
|
|
|
|
for(var i = 0; i<f_count; i++){
|
|
var footer = table.tr(footerOps);
|
|
for(var s=0; s<scheme.length; s++)
|
|
footer.td(scheme[s].footer[i].toString());
|
|
}
|
|
}
|
|
|
|
//doc footer
|
|
if(options.docFooter !== false){
|
|
var ft = doc.footer();
|
|
ft.text({
|
|
color: 0x666666, textAlign:"center"
|
|
}).append((webix.i18n.dataExport.page||"Page")).pageNumber().append(" "+(webix.i18n.dataExport.of || "of")+" ").pageCount();
|
|
}
|
|
|
|
|
|
//doc header, configurable
|
|
if(options.docHeader){
|
|
if(typeof options.docHeader == "string") options.docHeader = {text:options.docHeader};
|
|
var docHeaderOps = webix.extend(options.docHeader, {
|
|
color: 0x666666, textAlign:"right"
|
|
});
|
|
|
|
var hd = doc.header({paddingBottom:10});
|
|
hd.text(docHeaderOps.text, docHeaderOps);
|
|
}
|
|
|
|
if (options.docHeaderImage){
|
|
if(typeof options.docHeaderImage == "string") options.docHeaderImage = {url:options.docHeaderImage};
|
|
var hd = doc.header({paddingBottom:10});
|
|
var docImageOps = webix.extend(options.docHeaderImage, {
|
|
align:"right"
|
|
});
|
|
|
|
pdfjs.load(options.docHeaderImage.url, function(err, buffer){
|
|
if (!err){
|
|
var img = new pdfjs.Image(buffer);
|
|
var image = hd.image(img, docImageOps);
|
|
}
|
|
//render pdf and show in browser
|
|
var pdf = doc.render();
|
|
callback(pdf, options);
|
|
});
|
|
}
|
|
else{
|
|
//render pdf and show in browser
|
|
var pdf = doc.render();
|
|
callback(pdf, options);
|
|
}
|
|
}
|
|
|
|
})();
|