colorpicker

class webix.ui.colorpicker(data)
Arguments:
  • data (object) – A configuration object

Colorpicker view.

References

views
datepicker().
helpers
isUndefined(), protoUI().

External references

Official documentation page.

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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;
        obj.value = this.$prepareValue(obj.value);
        this.$setValue(obj.value);
    },
    getValue:function(){
        if (this._rendered_input && this._settings.editable)
            return this.getInputNode().value;
        else
            return this._settings.value;
    },
    $prepareValue:function(value){
        if(value && value.charAt && value.charAt(0) != "#")
            value = '#' + value;
        return value;
    },
    _getColorNode: function(){
        return this.$view.getElementsByTagName("DIV")[this._settings.editable?1:2];
    },
    _get_visible_text:function(value){
        return value;
    },
    $setValue:function(value){
        this._getColorNode().style.backgroundColor = value;
        this._settings.text = 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

*/