textbox.js-e

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

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

Textbox.prototype.hash = function () {
	return this.name+"$$"+
				this.x+"$$"+
				this.y+"$$"+
				this.width+"$$"+
				this.height+"$$"+
				this.placeholder+"$$"+
				this.maxlength+"$$"+
				this.enabled;
};
}}$;

/**
 * Creates a text input box for drawing on the canvas
 * 
 * @param [name] Prefix for _value observable.  Default is the name of the observable being defined.
 * @param x X-position
 * @param y Y-position
 * @param [width
 * @param [height]]
 * @param [placeholder_text] Text to be displayed by default
 * @param [max_characters] Maximum number of characters allowed in input box
 * @param [enabled] Boolean (true or false) to enable or disable input
 * 
 * #canvas #input #text #textbox
 */

	
func Textbox { ${{
	var argsProcesssed;

	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("Textbox: Every text box must have a name."), "error");
			return undefined;
		}
	}

	var x = arguments[argsProcessed];
	argsProcessed++;
	var y = arguments[argsProcessed];
	argsProcessed++;

	var width, height, placeholder, maxlength, enabled;
	var arg = arguments[argsProcessed];
	var argType = typeof(arg);

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

	if (arg === undefined || argType == "number") {
		height = 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];
	}
	enabled = arg;
	return new Textbox(name, x, y, width, height, placeholder, maxlength, enabled);
}}$; }

${{
Textbox.prototype.draw = function(context) {	

	if(this.elements === undefined) {
		var me = this;
		var name = this.name;

		var disabled = this.enabled === false? 'disabled="disabled"' : '';
		var placeholder;
		var maxlength = this.maxlength !== undefined? ' maxlength="' + this.maxlength + '"' : '';
		var jQuery;
		if (this.height === undefined) {
			placeholder = ' placeholder="' +
				(this.placeholder === undefined? name : this.placeholder) + '"';
			jQuery = $('<input type="text" ' + disabled + placeholder + maxlength + ' class="canvashtml-item" />');
		} else {
			// Placeholder text for textarea tag is buggy in IE11, so don't use it by default.
			placeholder = this.placeholder !== undefined && this.placeholder != ""?
				' placeholder="' + this.placeholder + '"' :
				'';
			jQuery = $('<textarea ' + disabled + placeholder + maxlength + ' class="canvashtml-item"></textarea>');
		}

		var element = jQuery.get(0);
		var valueSymbol = root.lookup(name + "_value");
		var value = valueSymbol.value();
		if (value === undefined) {
			valueSymbol.assign("", root.scope, root.lookup("Textbox"));
		} else {
			element.value = value;
		}
		valueSymbol.addJSObserver("updateTextbox", function (obs, value) {
			me.elements[0].value = value;
		});

		jQuery
		.on("input", function(event) {
			root.lookup(name + "_value").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 = [element];
  }
};

Textbox.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";
	style.width = Math.round(this.width * scale - 6) + "px";
	if (this.height !== undefined) {
		var lineHeight = edenUI.plugins.Canvas2D.defaultLineHeight;
		var rows = Math.floor(Math.round(this.height * scale - 4) / (lineHeight * zoom));	//See css/eden.css
		if (rows == 0) {
			rows = 1;
		}
		style.height = (rows * lineHeight * zoom) + "px";
	}
	style.fontSize = (edenUI.plugins.Canvas2D.defaultFontSizePx * zoom) + "px";
};

Textbox.prototype.toString = function() {
	if (this.name == this.obsName) {
		return "Textbox(" + Eden.edenCodeForValues(this.x, this.y, this.width,
			this.height, this.placeholder, this.enabled) + ")";
	} else {
		return "Textbox(" + Eden.edenCodeForValues(this.name, this.x, this.y, this.width,
			this.height, this.placeholder, this.enabled) + ")";	
	}
};

Textbox.prototype.getEdenCode = Textbox.prototype.toString;

}}$;