combobox.js-e

## Copyright (c) 2013, Empirical Modelling Group
## All rights reserved.
##
## See LICENSE.txt

${{
Combobox = function (name, suggestions, x, y, width, placeholder, maxlength, enabled) {
	this.name = name;
	this.obsName = root.currentObservableName();
	this.suggestions = suggestions;
	this.x = x;
	this.y = y;
	this.width = width;
	this.placeholder = placeholder;
	this.maxlength = maxlength;
	this.enabled = enabled;
}

Combobox.prototype.hash = function () {
	return this.name+"$$"+
				(Array.isArray(this.suggestions)? this.suggestions.join("$$") : "") +
				this.x+"$$"+
				this.y+"$$"+
				this.width+"$$"+
				this.placeholder+"$$"+
				this.maxlength+"$$"+
				this.enabled;
};

}}$;

/**
 * Creates a Combobox (drop down selection)
 * @param [name] defaults to the observable name
 * @param suggestions list of strings to be suggested
 * @param x
 * @param y
 * @param [width]
 * @param [placeholder] string to display before choice is made. Defaults to observable name.
 * @param [maxlength] Maximum length allowed in input
 * @param [enabled] defaults to true.
 * 
 * #canvas #combobox #input #select
 */

func Combobox { ${{
	var argsProcessed;

	var name;
	if (typeof(arguments[0]) == "string") {
		name = arguments[0];
		argsProcessed = 1;
	} else {
		name = root.currentObservableName();
		argsProcessed = 0;
		if (name === undefined) {
			eden.error(new Error("Combobox: Every combobox must have a name."), "error");
			return undefined;
		}
	}

	var suggestions = arguments[argsProcessed];
	argsProcessed++;
	var x = arguments[argsProcessed];
	argsProcessed++;
	var y = arguments[argsProcessed];
	argsProcessed++;
	var width, placeholder, maxlength;

	var arg = arguments[argsProcessed];
	var argType = typeof(arg);
	if (arg === undefined || argType == "number") {
		width = arg;
		argsProcessed++;
		arg = arguments[argsProcessed];
		argType = typeof(arg);
	}
	if (arg === undefined || argType == "string") {
		placeholder = arg;
		argsProcessed++;
		arg = arguments[argsProcessed];
		argType = typeof(arg);
	}
	if (arg === undefined || argType == "number") {
		maxlength = arg;
		argsProcessed++;
		arg = arguments[argsProcessed];
	}
	var enabled = arg;

	return new Combobox(name, suggestions, x, y, width, placeholder, maxlength, enabled);
}}$; }


${{

Combobox.prototype.makeOptionsHTML = function() {
	var html = "";
	for (var i = 0; i < this.suggestions.length; i++) {
		html = html + '\n<option value="' + this.suggestions[i] + '"/>';
	}
	return html;
}

Combobox.prototype.draw = function(context) {
	var input, suggestions;
	var me = this;
	var name = this.name;
	var valueSym = root.lookup(name + '_value');

	if (this.elements === undefined) {

		var disabled = this.enabled === false? 'disabled="disabled"' : '';
		var placeholder = ' placeholder="' + (this.placeholder === undefined? name : this.placeholder) + '"';
		var maxlength = this.maxlength !== undefined? ' maxlength="' + this.maxlength + '"' : '';
		var inputJQ = $('<input type="text" list="combobox-' + name + '" ' + disabled +
			placeholder + maxlength + ' class="canvashtml-item"/>');

		input = inputJQ.get(0);
		var suggestionsJQ = $('<datalist id="combobox-' + this.name + '"></datalist>');
		suggestions = suggestionsJQ.get(0);
		suggestionsJQ.html(this.makeOptionsHTML(this.values));

		var initialValue = valueSym.value();
		if (initialValue !== undefined) {
			input.value = initialValue;
		}
		valueSym.addJSObserver("updateCombobox", function (symbol, value) {
			input.value = value;
		});

		inputJQ.on("input", function(event) {
			valueSym.assign(event.target.value, root.scope, EdenSymbol.hciAgent, true);
		})
		.on("mousedown", function () {
			var mouseFollow = root.lookup("mouseFollow").value();
			root.lookup("mouseDownZone").assign(undefined, root.scope, EdenSymbol.hciAgent, mouseFollow);
		})
		.on("mouseup", function () {
			edenUI.plugins.Canvas2D.endClick();
		})
		.on("mouseenter", function () {
			var mouseFollow = root.lookup("mouseFollow").value();
			root.lookup("mouseZone").assign(name, root.scope, EdenSymbol.hciAgent, mouseFollow);
		});

		this.elements = [input, suggestions];

	} else {

		//Case when the user has performed direct assignment to one or more JavaScript properties.
		input = this.elements[0];
		suggestions = this.elements[1];
		$(suggestions).html(this.makeOptionsHTML());

		input.value = valueSym.value();

		if (this.enabled === false) { 
			input.disabled = true;
		} else {
			input.disabled = false;
		}

	}
};

Combobox.prototype.scale = function (scale, zoom, origin) {
	var style = this.elements[0].style;
	style.left = Math.round((this.x + origin.x) * scale) + "px";
	style.top =  Math.round((this.y + origin.y) * scale) + "px";
	if (this.width !== undefined) {
		style.width = Math.round(this.width * scale - 6) + "px";
	}
	style.fontSize = zoom + "em";
};

Combobox.prototype.toString = function() {
	if (this.name == this.obsName) {
		return "Combobox(" + Eden.edenCodeForValues(this.suggestions, this.x, this.y, this.enabled) + ")";
	} else {
		return "Combobox(" + Eden.edenCodeForValues(this.name, this.suggestions, this.x, this.y,
			this.maxlength, this.enabled) + ")";
	}
};

Combobox.prototype.getEdenCode = Combobox.prototype.toString;

}}$;