OL3 Closure Library Layers Widget

layerswidget.js

goog.provide('ol.widget.LayersSwitcher');
goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('ol.dom.Input');
goog.require('ol.widget.Widget');

ol.widget.LayersSwitcherProperty = {
    HEADER: 'Layers',
    LI_HEADER_TAG: 'h5'

};

ol.widget.Class.LayersSwitcher = {
    LABEL: {
        element: 'label-element',
        wrapper: 'label-wrapper'
    },
    CONTROL: {
        element: 'control-element',
        wrapper: 'control-wrapper'
    }
};

ol.widget.LayersSwitcher = function (opt_options) {
    var options = goog.isDef(opt_options) ? opt_options : {};
    this.className = goog.isDef(options.className) ? options.className : 'ol-layerswitcher';
    var additionalclassName = goog.isDef(options.additionalclassName) ? options.additionalclassName : '';
    var header = goog.dom.createDom(goog.dom.TagName.H4, {}, goog.dom.createDom(goog.dom.TagName.I, {
        class: 'fa fa-bars'
    }), ol.widget.LayersSwitcherProperty.HEADER);
    var headerElement = goog.dom.createDom(goog.dom.TagName.DIV, {
        class: this.className + '-header' + ' ' + ol.css.CLASS_WIDGET + '-header'
    }, header);
    var mainElement = goog.dom.createDom(goog.dom.TagName.DIV, {
        class: this.className + '-main' + ' ' + ol.css.CLASS_WIDGET + '-main'
    });
    goog.base(this, {
        headerElement: headerElement,
        mainElement: mainElement,
        className: this.className + ' ' + additionalclassName,
        target: options.target,
        type: 'LayersSwitcher'
    });
    this.groups = goog.isDef(options.groups) ? options.groups : {};
    this.layersLength_ = 0;
};
goog.inherits(ol.widget.LayersSwitcher, ol.widget.Widget);

ol.widget.LayersSwitcher.prototype.getNames = function (frameState) {
    var namedGroups = {};
    var groups = this.groups;
    var layerStatesArray = frameState.layerStatesArray;
    this.layersLength_ = layerStatesArray.length;
    layerStatesArray.forEach(function (state) {
        var layer = state.layer;
        var layerGroup = layer.get('group');
        if (goog.isDef(groups[layerGroup])) {
            if (!goog.isDef(namedGroups[layerGroup])) {
                namedGroups[layerGroup] = {};
                namedGroups[layerGroup].name = groups[layerGroup].name;
                namedGroups[layerGroup].layers = [];
                namedGroups[layerGroup].exclusive = groups[layerGroup].exclusive;
            };
            namedGroups[layerGroup].layers.push(layer);
        }
    });
    return namedGroups;
};

ol.widget.LayersSwitcher.prototype.handleMapPostrender = function (mapEvent) {
    if (!(this.layersLength_ === mapEvent.frameState.layerStatesArray.length)) {
        this.updateElement_(mapEvent.frameState)
    } else {
        return;
    }
    //this.updateElement_(mapEvent.frameState);
};
ol.widget.LayersSwitcher.prototype.updateElement_ = function (frameState) {
    var me = this;
    var groups = this.getNames(frameState);
    var groupsElements = [];
    goog.object.forEach(groups, function (grp) {
        var group = me.createGroupElement_(grp);
        groupsElements.push(group);
    });
    var ulElement = goog.dom.createDom(goog.dom.TagName.UL, {
        class: this.className + '-layer-list'
    }, groupsElements);
    goog.dom.removeChildren(this.mainElement);
    goog.dom.append(this.mainElement, ulElement);
};
ol.widget.LayersSwitcher.prototype.createGroupElement_ = function (group) {
    var me = this;
    var layers = [];
    var liNameElement = goog.dom.createDom(ol.widget.LayersSwitcherProperty.LI_HEADER_TAG, {
        innerHTML: group.name
    });
    group.layers.forEach(function (lyr, idx) {
        //var layerElement = (group.exclusive) ? me.createExclusiveLayerElement_(lyr, group.name, idx) : me.createLayerElement_(lyr);
        var layerElement = me.createLayerElement_(lyr);
        layers.push(goog.dom.createDom(goog.dom.TagName.LI, {}, layerElement));
    });
    var ulElement = goog.dom.createDom(goog.dom.TagName.UL, {}, layers);
    var liParentElement = goog.dom.createDom(goog.dom.TagName.LI, {}, liNameElement, ulElement);
    return liParentElement;
};
ol.widget.LayersSwitcher.prototype.createLayerElement_ = function (layer) {
    var name = layer.get('title');
    var checkbox = goog.dom.createDom(goog.dom.TagName.INPUT, {
        type: 'checkbox',
        id: name,
        name: name
    });
    var label = goog.dom.createDom(goog.dom.TagName.LABEL, {
        for: name,
        innerHTML: name
    });
    var visible = new ol.dom.Input(checkbox);
    visible.bindTo('checked', layer, 'visible');
    var element = goog.dom.createDom(goog.dom.TagName.DIV, {
        class: 'checkbox'
    }, checkbox, label);
    return element;
};

widget.js

goog.provide('ol.widget.Widget');
goog.provide('ol.widget.Class');
goog.require('goog.array');
goog.require('goog.dom');
goog.require('goog.dom.classes');
goog.require('goog.style');
goog.require('goog.events');
goog.require('ol.MapEventType');
goog.require('ol.css');
goog.require('ol.Object');

ol.css.CLASS_WIDGET = 'ol-widget';

ol.widget.FormBuilders = {
	form: function (options, opt_el) {
		return form = goog.dom.createDom(goog.dom.TagName.FORM, options, opt_el);
	},
	html: function (options, opt_el) {
		return goog.dom.createDom(goog.dom.TagName.DIV, options, opt_el);

	},
	label: function (options) {
		options.innerHTML = options.label;
		return goog.dom.createDom(goog.dom.TagName.LABEL, options);
	},

	input: function (options) {
		if (options.type == 'checkbox' || options.type == 'radio') {
			return ol.widget.FormBuilders.checkbox(options);
		} else {
			return goog.dom.createDom(goog.dom.TagName.INPUT, options);
		}

	},
	checkbox: function (options) {
		var element = goog.dom.createDom(goog.dom.TagName.INPUT, options);
		var label = ol.widget.FormBuilders.label({
			for: options.name,
			label: options.label
		});
		wrapperClassName = (options.type == 'radio') ? 'radio' : 'checkbox';
		return ol.widget.FormBuilders.html({
			class: wrapperClassName
		}, [element, label]);
	},

	button: function (options) {
		var icon = null;
		if (goog.isDef(options.iconClass)) {
			icon = ol.widget.FormBuilders.icon({
				class: options.iconClass
			})
		}
		options.class += ' btn btn-sm';
		var name = (goog.isDef(options.label)) ? goog.dom.createDom(goog.dom.TagName.SPAN, {}, options.label): null;
		return goog.dom.createDom(goog.dom.TagName.BUTTON, options, icon, name);

	},
	select: function (options) {
		if (options.multiple) {
			return ol.widget.FormBuilders.selectmulti(options);
		} else {
			return ol.widget.FormBuilders.selectsingle(options);
		}

	},
	selectmulti: function (options) {
		var opts = [];
		var values = options.values;
		goog.object.forEach(values, function (value, key) {
			var option = goog.dom.createDom(goog.dom.TagName.OPTION, {
				value: key,
				innerHTML: key,
				'data-subtext': value
			});
			opts.push(option);
		});
		return goog.dom.createDom(goog.dom.TagName.SELECT, options, opts);

	},
	selectsingle: function (options) {
		var opts = [];
		var values = options.values;
		goog.object.forEach(values, function (value, key) {
			var option = goog.dom.createDom(goog.dom.TagName.OPTION, {
				value: key,
				innerHTML: value
			});
			opts.push(option);
		});
		return goog.dom.createDom(goog.dom.TagName.SELECT, options, opts);

	},
	icon: function (options) {
		options.class += ' fa';
		return goog.dom.createDom(goog.dom.TagName.I, options);

	}
}

ol.widget.Widget = function (options) {
	goog.base(this);

	this.mainElement = goog.isDef(options.mainElement) ? options.mainElement : null;

	this.headerElement = goog.isDef(options.headerElement) ? options.headerElement : null;

	this.element = goog.dom.createDom(goog.dom.TagName.DIV, {
		class: options.className + ' ' + ol.css.CLASS_WIDGET
	}, this.headerElement, this.mainElement);

	this.target_ = goog.isDef(options.target) ? goog.dom.getElement(options.target) : null;

	this.map_ = null;

	this.set('active', true);

	this.listenerKeys = [];
};
goog.inherits(ol.widget.Widget, ol.Object);

ol.widget.Widget.prototype.disposeInternal = function () {
	goog.dom.removeNode(this.element);
	goog.base(this, 'disposeInternal');
};

ol.widget.Widget.prototype.getMap = function () {
	return this.map_;
};

ol.widget.Widget.prototype.handleMapPostrender = goog.nullFunction;

ol.widget.Widget.prototype.setMap = function (map) {
	if (!goog.isNull(this.map_)) {
		goog.dom.removeNode(this.element);
	}
	if (!goog.array.isEmpty(this.listenerKeys)) {
		goog.array.forEach(this.listenerKeys, goog.events.unlistenByKey);
		this.listenerKeys.length = 0;
	}
	this.map_ = map;
	if (!goog.isNull(this.map_)) {
		var target = !goog.isNull(this.target_) ? this.target_ : map.getOverlayContainerStopEvent();
		goog.dom.appendChild(target, this.element);
		if (this.handleMapPostrender !== goog.nullFunction) {
			this.listenerKeys.push(goog.events.listen(map, ol.MapEventType.POSTRENDER, this.handleMapPostrender, false, this));
		}
		map.render();
	}
};