htmlform

class webix.ui.htmlform(data)

Arguments:

• data (object) – A configuration object

Htmlform view.

References

views

template(), view().

components

DataLoader().

helpers

bind(), extend(), protoUI(), toNode(), uid().

mixins

EventSystem(), Values().

External references

Official documentation page.

Code

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);

})();
(function(){
    var google;
    webix.protoUI({
        name:"google-map",
        $init:function(config){
            this.$view.innerHTML = "<div class='webix_map_content' style='width:100%;height:100%'></div>";
            this._contentobj = this.$view.firstChild;
            this._waitMap = webix.promise.defer();

            this.data.provideApi(this, true);
            this.$ready.push(this.render);
        },
        getMap:function(waitMap){
            return waitMap?this._waitMap:this._map;
        },
        render:function(){
            if(typeof window.google=="undefined"||typeof window.google.maps=="undefined"){
                var name = "webix_callback_"+webix.uid();
                window[name] = webix.bind(function(){
                    google = window.google;
                    this._initMap.call(this,true);
                },this);

                var script = document.createElement("script");
                script.type = "text/javascript";
                var src = "//maps.google.com/maps/api/js?callback="+name;

                if (this.config.key)
                    src += "&key="+this.config.key;
                if (this.config.libraries)
                    src += "&libraries="+this.config.libraries;

                script.src = src;
                document.getElementsByTagName("head")[0].appendChild(script);
            }
            else
                this._initMap();
        },
        _initMap:function(define){
            var c = this.config;
            if(this.isVisible(c.id)){
                this._map = new google.maps.Map(this._contentobj, {
                    zoom: c.zoom,
                    center: new google.maps.LatLng(c.center[0], c.center[1]),
                    mapTypeId: google.maps.MapTypeId[c.mapType]
                });
                this._waitMap.resolve(this._map);
            }
        },
        center_setter:function(config){
            if(this._map)
                this._map.setCenter(new google.maps.LatLng(config[0], config[1]));

            return config;
        },
        mapType_setter:function(config){
            /*ROADMAP,SATELLITE,HYBRID,TERRAIN*/
            if(this._map)
                this._map.setMapTypeId(google.maps.MapTypeId[config]);

            return config;
        },
        zoom_setter:function(config){
            if(this._map)
                this._map.setZoom(config);
            return config;
        },
        layerType_setter:function(config){
            if(config == "heatmap")
                this.config.libraries = "visualization";
            if(this._layerApi[config]){
                webix.extend(this, this._layerApi[config], true);
                this.data.attachEvent("onStoreUpdated", webix.bind(this.drawData, this));
            }

            return config;
        },
        defaults:{
            zoom: 5,
            center:[ 39.5, -98.5 ],
            mapType: "ROADMAP",
            layerType:"marker"
        },
        $setSize:function(){
            webix.ui.view.prototype.$setSize.apply(this, arguments);
            if(this._map)
                google.maps.event.trigger(this._map, "resize");
        },
        $onLoad:function(data){
            if(!this._map){
                this._waitMap.then(webix.bind(function(){
                    this.parse(data);
                }, this));
                return true;
            }
            return false;
        },
        _layerApi:{
            marker:{
                drawData:function(id, item, operation){
                    switch (operation){
                        case "add":
                            item.$marker = this._getItemConfig(item);
                            break;
                        case "update":
                            item.$marker.setMap(null);
                            item.$marker = this._getItemConfig(item);
                            break;
                        case "delete":
                            item.$marker.setMap(null);
                            break;
                        default:
                            this.data.each(function(item){
                                item.$marker = this._getItemConfig(item);
                            }, this);
                            break;
                    }
                },
                clearAll:function(){
                    this.data.each(function(obj){
                        obj.$marker.setMap(null);
                    });
                    this.data.clearAll();
                },
                showItem:function(id){
                    var item = this.getItem(id);
                    this._map.setCenter(new google.maps.LatLng(item.lat, item.lng));
                },
                _getItemConfig:function(item){
                    var obj = {};
                    for(var i in item) obj[i] = item[i];
                    obj.position = new google.maps.LatLng(item.lat, item.lng);
                    obj.map = item.hidden? null: this._map;

                    var marker = new google.maps.Marker(obj);
                    this._events(marker);
                    this.callEvent("onItemRender", [item]);

                    return marker;
                },
                _events:function(marker){
                    var map = this;

                    marker.addListener('click', function(){
                        map.callEvent("onItemClick", [this.id, this]);
                    });

                    if(marker.getDraggable()){
                        marker.addListener('dragend', function(){ map._onDrag(this, true); });
                        marker.addListener('drag', function(){ map._onDrag(this); });
                    }
                },
                _onDrag:function(marker, end){
                    var item = this.getItem(marker.id);
                    var pos = marker.getPosition();
                    var ev = end?"onAfterDrop":"onDrag";

                    item.lat = pos.lat();
                    item.lng = pos.lng();
                    this.callEvent(ev, [item.id, item]);
                }
            },
            heatmap:{
                heatmapConfig_setter:function(value){
                    value = value || {};
                    return value;
                },
                drawData:function(){
                    if(this._heatmap){
                        this._heatmap.setMap(null);
                        this._heatmap = null;
                    }

                    var hdata = [];
                    this.data.each(function(item){ hdata.push(this._getConfig(item)); }, this);

                    if(hdata.length){
                        var data = webix.extend(this.config.heatmapConfig, {data:hdata, map:this._map}, true);
                        this._heatmap = new google.maps.visualization.HeatmapLayer(data);
                        this.callEvent("onHeatMapRender", [this._heatmap]);
                    }
                },
                getHeatmap:function(){
                    return this._heatmap;
                },
                _getConfig:function(item){
                    var obj = {};
                    for(var i in item) obj[i] = item[i];
                    obj.location = new google.maps.LatLng(item.lat, item.lng);

                    return obj;
                }
            }
        }
    }, webix.DataLoader, webix.EventSystem, webix.ui.view);
})();