Custom Input Types

From Geomoose

You can create your own input types as discussed in http://www.geomoose.org/howto/add_input_types.html.

TEXT BLOCK - this allows you to insert text (or any HTML tag) between other inputs. Nice for notes and formatting the tab.

GeoMOOSE.Services.InputType.Text = OpenLayers.Class(GeoMOOSE.Services.InputType, {
	MAPBOOK_NAME: "text",

	initialize: function(input, options) {
		GeoMOOSE.Services.InputType.prototype.initialize.apply(this, arguments);
		this.options.renderable = true;
	},

	renderHTML: function(parent_id) {
		var p = document.getElementById(parent_id);
		var inputParent = document.createElement('span');
		inputParent.className = 'service-input-parent';
		p.appendChild(inputParent);

		var text = document.createElement('span');
		text.className = 'service-input-text';
		inputParent.appendChild(text);
		text.innerHTML = OpenLayers.Util.getXmlNodeValue(this.input);
	}
	
});

In the Mapbook, it looks like this:

<input type='text'><![CDATA[My text goes here.  I can also use html tags like <br/> to insert a blank line]]></input>

Here's an example to add a text area input type. This was used to allow users to enter a message into a form field for an email service.

GeoMOOSE.Services.InputType.TextArea = OpenLayers.Class(GeoMOOSE.Services.InputType, {
	MAPBOOK_NAME: "textarea",

	initialize: function(input, options) {
		GeoMOOSE.Services.InputType.prototype.initialize.apply(this, arguments);
		this.options.renderable = true;
	},

	updateServiceSetting: function() {
		//console.log(this.value);
		this.input_obj.setValue(this.value);
	},

	keyCallService: function(event) {
		if(window.event) { event = window.event; }
		var keyCode = null;
		if(event.which) {
			keyCode = event.which;
		} else if(event.keyCode) {
			keyCode = event.keyCode;
		}
		if(keyCode == 13) {
			this.onchange();
			document.getElementById('submit-service').onclick();
		}
	},

	renderHTML: function(parent_id) {
		var p = document.getElementById(parent_id);
		var inputParent = document.createElement('span');
		inputParent.className = 'service-input-parent';
		p.appendChild(inputParent);

		var i = document.createElement('textarea');
		i.className = 'service-input';
		i.input_obj = this;
		i.id = 'service-input-'+this.getName();

		if(this.getValue()) {
			i.value = this.getValue();
		}
		i.onchange = this.updateServiceSetting;
		i.onkeypress = this.keyCallService;

		var title = document.createElement('span');
		title.className = 'service-input-title';
		inputParent.appendChild(title);
		title.innerHTML = this.input.getAttribute('title');
		inputParent.appendChild(i);
	}
	
});

In the Mapbook, it looks like this:

<input type="textarea" name="message" title="Message: "></input>